- ЛентаЧетверг 18.04.2024 05:47
in.uCoz.org - создан в помощь uCмастеру и служит для решения проблем возникших у пользователей администрирующих сайты системы uCoz. Все вопросы пишите на форуме в соответствующий раздел
Вы находитесь: Главная » Горизонтальное меню на CSS - Форум- Страница 1 из 1
- 1
Форум » Уроки Css » Уроки css для новичков » Горизонтальное меню на CSS Горизонтальное меню на CSS Reactor Дата: Вторник, 14.01.2014, 17:26 | Сообщение # 1 
Сегодня мы будем создавать простое горизонтальное меню с помощью CSS. Для начала мы создадим скелет меню на HTML, и усвоим главные навыки создания горизонтальных меню. После чего мы придадим красивый вид для меню, используя CSS. Как известно, корифеи верстки, предпочитают семантику, от которой мы постараемся не отступать.
html код меню
Код<ul id="menu">
<li><a href="http://in.ucoz.org">Главная</a></li>
<li><a href="http://in.ucoz.org">Дизайн, CSS</a></li>
<li><a href="http://in.ucoz.org">Программирование</a></li>
<li><a href="http://in.ucoz.org">Еще пункт меню</a></li>
</ul>
По html структуре объяснять нечего, простой UL список. Как упоминалось раньше, семантика соблюдается. Семантика – это когда html тег соответствует содержимому. Если разделы меню сделать DIV блоками, это не будет семантикой. Равнозначные элементы должны быть списком. Посмотрим, что у нас получилось на данном этапе:
UL элемент является блочным, поэтому его ширина будет 100% (на всю ширину страницы). LI также блочный элемент, а вот A – не блочный. Убедиться в этом можно с помощью наложения рамки в css стиле блока – border:1px solid #f00; Мне часто приходиться пользоваться этой хитростью, чтобы видеть границы элементов.
CSS код меню
Для придания этому меню горизонтального положения, выравнивания по центру и соответствующего вида, напишем следующий CSS код:
Код#menu{list-style:none; width:500px; padding:0; margin: auto;}
#menu li{float:left; font:bold 14px Arial;}
#menu a{color:#666; display:block; height:40px; line-height:36px; padding:0px 10px 0px 10px; background:#eee; text-decoration:none;}
#menu a:hover{color:#fff; background:#888;}
На данном этапе получилось следующее:
Разберем все поэтапно, до каждой мелочи:
#menu {…} – С помощью этого выражения мы присваиваем стили для UL элемента, у которого id=menu.
list-style:none; – убираем маркеры (пульки), слева от каждого элемента в списке.
width:500px; – ширина меню 500 пикселей.
margin: auto; – выравнивает меню по центру страницы. Если не будет указана ширина, то выравнивания не произойдет, поэтому предыдущий параметр обязателен.
padding:0; – устанавливаем нулевые внутренние отступы. То есть убираем их вообще. Если не знаете что это дает, установите их в 20px и посмотрите, что измениться.
#menu li {…} – присваиваем стили для LI элементов.
float:left; – обтекание элемента по левой стороне. Это выражение придает меню горизонтального положения.
font:bold 14px Arial; – устанавливаем стиль для текста в самой короткой форме, bold – жирный текст, 14px – размер шрифта в пикселях, Arial – тип шрифта.
#menu a {…} – присваиваем стили для A элемента (ссылки).
color:#666; – темно-серый цвет шрифта.
display:block; - делаем элемент блочным. Это даст возможность присваивать высоту для элемента. В практическом аспекте, это делает кликабельным не только текст ссылки, ни и поле вокруг текста.
height:40px; – высота меню будет 40 пикселей.
line-height:36px; – высота верхней линии над текстом. Это дает возможность задавать вертикальное положение текста внутри блока. Мы используем это для выравнивания текста в вертикальном направлении.
padding:0px 10px 0px 10px; – делаем внутренние отступы слева и справа по 10 пикселей.
background:#eee; – устанавливаем серый цвет фона для элементов меню.
text-decoration:none; – убираем линию подчеркивающую ссылку.
#menu a:hover {…} – присваиваем стили для A элемента при наведении на нее мышки.
color:#fff; – меняем цвет текста на белый.
background:#888; – цвет фона меняем на темно серый.
Доработка горизонтального меню CSS
Это все, что касается основ создания горизонтальных меню на CSS. Далее мы придадим красивый вид нашему меню. Для этого мы присвоим для a элементаbackground:url(background.png) repeat-x; для a:hover другой фонbackground:url(hover.png) repeat-x; Ниже предоставлены исходные картинки.
background.png -
hover.png -
Теперь меню имеет немного иной вид:
Это самое простое горизонтальное меню на CSS, которое вы можете использовать как основу для разработки меню для своего сайта. Также можете посмотреть как создать выпадающее горизонтальное меню на css. Надеюсь, статья была полезной и понятной. Если остались вопросы или недопонимания по поводу горизонтальных меню, смело пишите в комментарии.
P.s. "выпадающее горизонтальное меню" будет позже.Сообщение отредактировал Reactor - Пятница, 17.01.2014, 10:20«Пред. тема | След. тема» 
Prosvetekvator Дата: Вторник, 14.01.2014, 18:11 | Сообщение # 2 
Reactor, Молодец! Хорошие и полезные уроки пишешь 5+
Проблемы по установке скриптов пишите на форум: тыц
Пообщаться здесь 
Reactor Дата: Среда, 15.01.2014, 10:38 | Сообщение # 3
Prosvetekvator, это не я писал 
Я по нему учился и записал его детально в планшет давно еще, решил других научить. А автор "SiteAr" если не ошибаюсь. Я мог бы своими словами, но зачем придумывать заново велосипед?) Я лучше другие уроки напишу, которых у меня нет в планшете)
Prosvetekvator Дата: Среда, 15.01.2014, 16:06 | Сообщение # 4
Reactor, Фигово что копипаст, поисковики это не любят.
Проблемы по установке скриптов пишите на форум: тыц
Пообщаться здесь Reactor Дата: Среда, 15.01.2014, 18:27 | Сообщение # 5
Ну такого урока я нигде и не у кого не видел больше. webseo-24 Дата: Понедельник, 24.08.2015, 22:40 | Сообщение # 6 
Не удивительно сейчас это все делается в немного другом формате, посмотрите примеры css3 верстки [Спам]
gulyanickaya Дата: Вторник, 25.08.2015, 12:34 | Сообщение # 7
очень полезная ссылка! Сама пользуюсь этим сайтом постоянно! Мне кажется у них самая большая база бесплатных шаблонов и плагинов Форум » Уроки Css » Уроки css для новичков » Горизонтальное меню на CSS - Страница 1 из 1
- 1
Понравилась тема? Расскажи друзьям...
