Войти Регистрация

Горизонтальное меню на CSS


Сегодня мы будем создавать простое горизонтальное меню с помощью CSS. Для начала мы создадим скелет меню на HTML, и усвоим главные навыки создания горизонтальных меню. После чего мы придадим красивый вид для меню, используя CSS. Как известно, корифеи верстки, предпочитают семантику, от которой мы постараемся не отступать.

HTML код меню

<ul id="menu">
	<li><a href="http://sitear.ru">Главная</a></li>
	<li><a href="http://sitear.ru">Дизайн, CSS</a></li>
	<li><a href="http://sitear.ru">Программирование</a></li>
	<li><a href="http://sitear.ru">Еще пункт меню</a></li>
</ul>

По html структуре объяснять нечего, простой UL список. Как упоминалось раньше, семантика соблюдается. Семантика – это когда html тег соответствует содержимому. Если разделы меню сделать DIV блоками, это не будет семантикой. Равнозначные элементы должны быть списком. Посмотрим, что у нас получилось на данном этапе:

HTML структура горизонтального меню

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;}

На данном этапе получилось следующее:

Горизонтальное меню css

Разбор полетов

Разберем все поэтапно, до каждой мелочи:

#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. Далее мы придадим красивый вид нашему меню. Для этого мы присвоим для a элемента background:url(background.png) repeat-x; для a:hover другой фон background:url(hover.png) repeat-x; Ниже предоставлены исходные картинки.

background.pngФон для меню

hover.pngФон для наведения на элемент меню

Теперь меню имеет немного иной вид:

Готовое горизонтальное css меню

Это самое простое горизонтальное меню на CSS, которое вы можете использовать как основу для разработки меню для своего сайта. Также можете посмотреть как создать выпадающее горизонтальное меню на css. Надеюсь, статья была полезной и понятной. Если остались вопросы или недопонимания по поводу горизонтальных меню, смело пишите в комментарии.



Дальше: Заработок на контекстной рекламе, идеи для эффективного заработка


Дискуссия по теме    31 Комментарий 
Добавить комментарий
Ильдар 11.11.2014 в 22:47
Добрый вечер! а как к пунктам меню добавить материал текст фото видео через css и html не используя движок joomla!
Оксана 04.11.2014 в 15:52
Здравствуйте! Объясните мне чайнику в каком файле должны производиться все эти изменения, общая логика меню мне понятна, но где должен располагаться этот код никак не пойму.
Darksoul 03.09.2014 в 01:00
Здравствуйте! Мне нужна помощь в задании конкретных координат горизонтального меню, а именно в шапке сайта, наложив его сверху на картинку шапки. Сайт на движке вордпресс, могу скинуть файлы header.php, style.php и function.php если они нужны. Ответ если можно пришлите на почту, и заранее спасибо!
Умник 27.08.2014 в 09:50
UL - это весь список, а LI - это вся строчка, вообще-то.
Katrin 25.06.2014 в 01:02
Подскажите как создать горизонтальное меню в CSS и HTML так скажем горизонтальные заголовки и каждый заголовок разным стилем Пример: "контакты ЗАГОЛОВОК корзина"
Артём 23.03.2013 в 14:01
Спасибо, статья очень помогла
Лариса 28.10.2012 в 09:41
Добрый день! Благодаря Вам смогла создать меню. Спасибо! Только есть один момент: в IE меню не горизонтальное, а вертикальное и на ширину страницы. Подскажите, как убрать этот бок. Вот CSS код: #menu{list-style:none; width:1100px; padding:0; margin: auto;} #menu li{float:left; font:bold 14px Arial;} #menu a{ border: 1px solid #FFF; border-right-color: #527337; border-bottom-color: #527337; color:000099; display:block; height:36px; line-height:36px; padding:0px 10px 0px 10px; background:#CCCCFF; text-decoration:none; #menu a:hover{color:#FFFFFF; background:#9999FF;}
Тарас 29.10.2012 в 22:52
Это нужно тестировать. Такой эффект могут давать другие стили сайта. Если есть ссылка на пример, скидывайте сюда.
Валерий 10.09.2012 в 21:38
Вот ещё интересное горизонтальное меню - http://lecaw.ru/index.php/categories/css/item/280-kak-sdelat-gorizontalnoye-vipadayushee-menu-s-effektom-prokrutki-na-css
игорь 30.07.2012 в 18:08
Добрый день . Получилось . Все благодаря ВАМ. Осталось несколько вопросов: 1 поместил внизу шапки сайта <div id …..relative;width:700px;margin:auto;font:bold 12px Verdana;color:#FFF2C0; display:block;height:40px; line-height:36px;padding:0px 1px 0px 1px; 1 это в CSS #uMenuDiv2{list-style:none; width:700px; padding:0; margin:auto;} #uMenuDiv2 li{float:left;font:bold 12px Verdana;color:#FFF2C0;} #uMenuDiv2 a{color:#ffffff; display:block; height:40px; line-height:36px; padding:0px 1px 0px 1px То , что выделено находится внизу шапки сайта и в CSS. Не понятно, что д. б. только в CSS И еще, понравилось , на вашем сайте – постоянная активность кнопки, обозначающая страницу, которая , сейчас открыта. М.б. подскажете . В любом случае огромное ВАМ СПАСИБО за помощь , ведь я узнал что то новое, благодаря ВАМ. С уважением Игорь
Тарас 31.07.2012 в 00:59
Можно хоть в CSS, хоть прямо в теге div. Лучше оставить только в css. Все стили выносят в отдельное место специально, чтобы легче было потом редактировать и менять дизайн. С активной кнопкой ничего не получиться, так как для этого нужно программировать... а как там все на укозе я не знаю. Всего вам доброго! Рад что все получилось.
игорь 29.07.2012 в 19:28
Добрый день, Тарас! Вообщем просмотрел разные варианты горизонтального меню, интернет , форумы ,все попробовал , но ничего не получилось , то искажает дизайн,то еще что то , тоска . Вывод- все что пишут в интернете - это для более- менее подготовленных , специалисты делятся своими разработками, вариантами и т.д. Новичкам это сложно . К ВАМ , убедительная просьба , если есть возможность , помогите довести дело до конца, ну а на нет ...Вы и так много времени потратили на меня. С уважением Игорь
Тарас 30.07.2012 в 01:56
Дело в том, что я сам не знаю куда добавлять пункт uMenuDiv2... системой ucoz никогда не пользовался. Добавлять нужно туда где пишуться стили 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:url(background.png) repeat-x; text-decoration:none;} #menu a:hover{color:#fff; background:url(hover.png) repeat-x;} вместо #menu пишите #uMenuDiv2... все остальное оставляете так же... две эти картинки закидаете в папку с файлом стилей (тот куда вы пишите этот код).
игорь 25.07.2012 в 20:22
Здравствуйте. Благодарю за ответы. То , что вы подсказали –сделал. Нравится. Провел день в поисках ответа 1 Посмотрите сайт http://compstil.ucoz.ru/ 2 Не получились блоки . цвет блоков и hover(цвета положил в файловый менеджер), есть адрес ссылки , но … Пробовал разные варианты ,смотрел интернет , форум –но результата нет,т.е. нет картинки как в вашей статье – красиво ,просто. 3 кстати , запутался , по моему эти данные надо вводить в CSS , но тогда м.б. надо создать в CSS пункт типа .. uMenuDiv2… , или эти данные надо добавлять в Site Menus или другое Если , возможно найдете время , пожалуйста посмотрите. Еще раз огромное спасибо за вашу помощь С уважением Игорь
игорь 25.07.2012 в 09:11
4 как разместить ссылки страниц в меню Вообщем , сами увидите , мои недоработки ,Прошу подсказать что надо доделать Еще раз огромное спасибо за вашу помощь С уважением Игорь Спасибо -всего 4 части Игорь Статья нужная , полезная
Тарас 25.07.2012 в 14:11
Вы вставили в меню просто текст, оно должно выглядеть следующим образом: <div id="uMenuDiv2" class="uMenuH" style="position:relative;width:600px;margin:auto;font:bold 12px Verdana;color:#FFF2C0;display:block;height:40px; line-height:36px;padding:0px 10px 0px 10px;background:#BDBDBD; text-decoration:none; "> <li><a href="http://compstil.ucoz.ru/">Главная</a></li> <li><a href="http://compstil.ucoz.ru/">Доска объявлений</a></li> </ul> </div>
игорь 25.07.2012 в 09:09
3 Остались не решенными следующее - #menu {…} – С помощью этого выражения мы присваиваем стили для UL элемента, у которого id=menu. ????? - #menu li {…} – присваиваем стили для LI элементов. ???? - display:block; - делаем элемент блочным. Это даст возможность присваивать высоту для элемента. В практическом аспекте, это делает кликабельным не только текст ссылки, ни и поле вокруг текста. Не получилось - padding:0px 10px 0px 10px; делаем внутренние отступы слева и справа по 10 пикселей Не заметил - #menu a:hover {…} – присваиваем стили для A элемента при наведении на нее мышки.???? -color:#fff; – меняем цвет текста на белый. -background:#888; – цвет фона меняем на темно серый.
Тарас 25.07.2012 в 14:16
В вашем случае присваивание стилей будет следующим: #uMenuDiv2 {здесь идут все стили для меню} #uMenuDiv2 li {здесь идут стили для разделов меню, смотрите ответ на последний ваш коммент} #uMenuDiv2 a:hover {color:#fff; background:#888;} - это для ссылок меню при навидении. Рассмотрите еще раз, внимательно, картинку в начале урока! И HTML код меню.
игорь 25.07.2012 в 09:09
2 итак ,я взял Ваш код и поместил его внизу верхней части сайта и постепенно добавлял ,по пункту –получилось следующее <div id="uMenuDiv2" class="uMenuH" style="position:relative;width:600px;margin:auto;font:bold 12px Verdana;color:#FFF2C0;display:block;height:40px; line-height:36px;padding:0px 10px 0px 10px;background:#BDBDBD; text-decoration:none; "> Главная Доска объявлений Новости Наука, техника Обратная связь Контакты </ul> </div>
игорь 25.07.2012 в 09:08
пересылаю частями Добрый день. Благодарю за ответ Возникли новые вопросы. Пожалуйста , если возможно , ответьте . Хочется довести дело до конца 1 Посмотрите сайт http://compstil.ucoz.ru/ Есть горизонтальное меню , созданное с вашей помощью. (этот сайт отличается от того . что я упоминал ранее , только названием и служит мне экспериментальной базой , на нем я пробую разные варианты , а потом переношу на основной)
игорь 23.07.2012 в 14:51
Здраввствуйте. сайт http://impexstil.ucoz.ru/ спасибо за проявленное желание помочь на сайте видно горизонтальное меню , надо его установить по центру и хотел бы такие же кнопки С уважением Игорь
Тарас 24.07.2012 в 00:14
<div id="uMenuDiv2" class="uMenuH" style="position:relative;"> <ul class="uMenuRoot"> содержимое меню </ul> </div> вот так выглядит ваше меню... Попробуйте назначить к div ширину width:500px; или больше, главное чтобы хватало на все разделы. После этого к этому же div блоку добавьте атрибут margin:auto;
игорь 22.07.2012 в 14:16
Добрый день! Благодарю за статью .Очень полезна. Я, не специалист , поэтому похвала будет не корректно, Если позволите , вопрос: -у меня сайт ucoz, есть вертикальное меню , но надо продублировать в горизонтальном , с последующей переделкой вертикального меню в категории и др. Пока , не ясен вопрос в какой раздел CSS вставить код С уважением Игорь
Тарас 23.07.2012 в 14:39
Здравствуйте Игорь! К сожалению на ucoze я никогда не работал и не знаю что и к чему... Может быть что-то посоветую, если дадите ссылку на сайт (страницу).
Павел 03.07.2012 в 16:33
Спасибо! Ваша статья очень помогла мне!
timon 04.06.2012 в 12:20
Спасибо огромное!
artiom 14.05.2012 в 15:35
великолепно! респект и благодарность автору!)
Тарас 14.05.2012 в 15:59
Спасибо, Артем!
Устим 01.04.2012 в 19:45
Тарас, спасибо за ответ. Пробовал и так и так. Ничего не происходит. Только липнет к левому краю и всё...( Размпер остаётся тот же.
Устим 31.03.2012 в 17:14
Здравствуйте. Хотел бы узнать, как зделать так чтобы бекграунд меню был до самого конца сайта, а не заканчивался на последнем разделе. У меня шляпа сайта на весь экран по горизонтали, а меню от левого края идёт до средины, потому что всего 5-ть разделов. А я хотел бы чтобы полоса меню шла до конца. А то как то очень глупо получается сейчас)))
Тарас 01.04.2012 в 16:54
Уберите аттрибут width:500px, или установите 100%, должно работать.
Добавить комментарий
Просмотров: 83793