Где находится горизонтальное меню. Как создать в CSS выпадающее меню

На iOS - iPhone, iPod touch 01.09.2019

На iOS - iPhone, iPod touch

Редко можно увидеть на сайте горизонтальные меню, которые выпадают, при наведении мыши, но они очень красивы и функциональны. Или как принято говорить - юзабильные. Сегодня мы создадим юзабильное выпадающее горизонтальное меню на чистом css коде. Часто замечал, что люди используют javascript, для достижения данного эффекта. На самом деле, все можно сделать только на CSS. Рассмотрим два варианта выпадающих горизонтальных меню на CSS. Хорошо, когда есть выбор, думаю вы согласны.

Если вам нужно простое горизонтальное меню. Читаем статью о создании . Освоив основы приступайте к созданию выпадающего меню.

Вариант 1 - Выпадающее горизонтальное меню

Для ясности смотрите скриншот ниже. Наверняка вы знакомы с такой структурой горизонтального меню.

Для еще большей ясности, посмотрим на HTML структуру меню. Убедимся, чем именно достигнуто горизонтальное положение меню и его валидность. Структура css меню:

Показ и скрытие дочерних элементов меню осуществляется с помощью CSS: ul > li:hover ul. То есть достаточно просто. С помощью этого переключателя можно определить поведение всех дочерних меню. При создании обычного горизонтального меню, к тому же display:block мы добавляем другие стили, такие как, цвет фона и т.д. Единственная разница между обычным меню и выпадающим меню заключается в том, что мы не ставим стили для вложенных UL. Нужно ставить на зависящий LI элемент, который наведенный (UL > LI: hover).

Давайте рассмотрим CSS код:

#header { height:120px; position:relative; background: transparent url(header_bkg.png) repeat-x scroll top center;} #nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;} #nav > li { list-style-type:none; float:left; display:block; margin:0px 10px; position:relative; padding:10px; width:100px;} #nav > li:hover ul { display:block; } #nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; } #nav li ul { margin:0px; padding:0px; display:none;} #nav li ul li { list-style-type:none; margin:10px 0 0 0;} #nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;} #nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;} #nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }

Вот как это можно сделать с помощью чистого CSS кода. До сих пор в голове не влаживается, для чего использовать JavaScript, разве что для .

Вариант 2 - горизонтальное меню + решение для IE6

Нужно обратить внимание, что вариант 1, не будет работать в IE6. Решением совместимости меню с IE6, будет кусочек js кода. Ближе к делу, создаем меню. Ниже предоставлен скриншот будущего меню:

Конструкция меню схожа с первой версией, поэтому перейдем к самому коду.

#menu { padding: 0; margin: 0; font-size: 100%; font-family: Georgia; } #menu li { list-style: none; float: left; height: 33px; padding: 0; margin: 0; width: 150px; text-align: center; background: #171717; position: relative; padding-top: 12px; } #menu li ul { list-style: none; padding: 0; margin: 0; width: 150px; display: none; position: absolute; left: 0; top: 45px; } #menu li ul li { float: none; height: 33px; margin: 0; width: 150px; text-align: center; background: #7F7F7F; } #menu li a { display: block; width: 150px; height: 33px; color: #fff; text-decoration: none; } #menu li:hover ul, #menu li.jshover ul { display: block; } #menu li:hover, #menu li.jshover { background: #424242; }

JS - решение для IE6

jsHover = function() { var hEls = document.getElementById("menu").getElementsByTagName("li"); for (var i=0, len=hEls.length; i a { color: #9fde63; }

Шаг 4 - Выпадающее меню

Прежде всего, давайте удалим эту строку кода, которую мы добавили на втором шаге.

Menu ul { display: none; }

Теперь будем редактировать стиль для подменю. Добавим позиционирование подменю 40px сверху и 0px слева от пункта меню и добавим закругленные углы снизу. Установим нулевую прозрачность, а при наведении изменим ее на 1, чтобы создать усиление / затухания эффекта. Для слайд-эффекта вверх / вниз мы должны задать высоту списка равную 0px, когда выпадающее меню скрыто, и 36px при наведении курсора на раскрывающийся список.

Menu ul { position: absolute; top: 40px; left: 0; opacity: 0; background: #2f3035; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; -webkit-transition: opacity .3s ease .1s; -moz-transition: opacity .3s ease .1s; -o-transition: opacity .3s ease .1s; -ms-transition: opacity .3s ease .1s; transition: opacity .3s ease .1s; } .menu li:hover > ul { opacity: 1; } .menu ul li { height: 0; overflow: hidden; padding: 0; -webkit-transition: height .3s ease .1s; -moz-transition: height .3s ease .1s; -o-transition: height .3s ease .1s; -ms-transition: height .3s ease .1s; transition: height .3s ease .1s; } .menu li:hover > ul li { height: 36px; overflow: visible; padding: 0; }

Ширину кликабельного выпадающего меню установим - 100px. После каждой ссылки добавил границу, чтобы разделить их. Границу в последней ссылке удалим.

Menu ul li a { width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #464649; } .menu ul li:last-child a { border: none; }

Чтобы закончить горизонтальное меню на CSS нужно добавить иконку для каждого выпадающего подменю. Для этого мы создадим собственный класс для каждого из подменю и добавим фоновое изображение.

Menu a.d { background: url(docs.png) no-repeat 6px center; } .menu a.m { background: url(bubble.png) no-repeat 6px center; } .menu a.s { background: url(arrow.png) no-repeat 6px center; }

Заключение

Мы успешно создали выпадающее горизонтальное меню с применением CSS3 стилей и без применения , хотя его тоже можно было . Если у вас возникли вопросы, дайте мне знать об этом в комментариях.

(cкачиваний: 398)

Большинство классических сайтов в интернете использует горизонтальное меню в качестве основного элемента навигации. Иногда в нем могут встречаться разные дополнительные фишки — многоуровневые конструкции, иконки для подпунктов, блок поиска, сложные списки и т.п. Недавно в блоге уже была небольшая подборка , а сегодня рассмотрим 4 практических примера как сделать выпадающее меню на CSS + HTML. Информация пригодится начинающим разработчикам и тем, кто хочет изменить навигацию на своем сайте.

Первый туториал CSS3 Dropdown Menu — самый новый в подборке (за апрель 2016). Плюсы решения: в данном горизонтальном выпадающем меню для сайта в подпунктах есть иконки, реализация и сам CSS код достаточно простые для понимания и внедрения.

Шаг1 — HTML разметка

Первым делом создаем неупорядоченный список в HTML с якорными ссылками (#) для его элементов. Туда же в один из пунктов добавляем еще один вложенный список, который будет отвечать за подменю.

Шаг2 — отображение меню

Удаляем лишние отступы в CSS для элементов горизонтального выпадающего меню сайта. На этом же этапе установим фиксированную ширину и высоту пунктов меню, а также добавим закругленные углы.

.menu, .menu ul, .menu li, .menu a { margin : 0 ; padding : 0 ; border : none ; outline : none ; } .menu { height : 40px ; width : 505px ; background : #4c4e5a ; background : -webkit-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; background : -moz-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; background : -o-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; background : -ms-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; background : linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; -webkit-border-radius: 5px ; -moz-border-radius: 5px ; border-radius : 5px ; } .menu li { position : relative ; list-style : none ; float : left ; display : block ; height : 40px ; }

Menu, .menu ul, .menu li, .menu a { margin: 0; padding: 0; border: none; outline: none; } .menu { height: 40px; width: 505px; background: #4c4e5a; background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .menu li { position: relative; list-style: none; float: left; display: block; height: 40px; }

Шаг3 — оформление ссылок

Кроме базовых фишек в стилях (шрифт, цвет, высота) используем и создаем плавный переход цвета текста при наведении. Также добавляем в меню разделители, убирая границу у первого элемента слева и у последнего справа.

.menu li a { display : block ; padding : 0 14px ; margin : 6px 0 ; line-height : 28px ; text-decoration : none ; border-left : 1px solid #393942 ; border-right : 1px solid #4f5058 ; font-family : Helvetica, Arial, sans-serif ; font-weight : bold ; font-size : 13px ; color : #f3f3f3 ; text-shadow : 1px 1px 1px rgba (0 , 0 , 0 , .6) ; -webkit-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in-out; transition : color .2s ease-in-out; } .menu li: first-child a { border-left : none ; } .menu li: last-child a{ border-right : none ; } .menu li: hover > a { color : #8fde62 ; }

Menu li a { display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid #393942; border-right: 1px solid #4f5058; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #f3f3f3; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in-out; transition: color .2s ease-in-out; } .menu li:first-child a { border-left: none; } .menu li:last-child a{ border-right: none; } .menu li:hover > a { color: #8fde62; }

Шаг4 — подменю

Поскольку у нас меню сайта на CSS выпадающее, то следует задать также оформление вложенному списку. Вначале ставим отступ 40px сверху и 0px слева + добавлем округленные углы. Для показа/скрытия подменю изначально устанавливаем свойство прозрачности (opacity) равное нулю, а при наведении — единице. Для создания эффекта появления подменю указываем значение высоты списка в ноль, а при hover = 36px.

.menu ul { position : absolute ; top : 40px ; left : 0 ; opacity : 0 ; background : #1f2024 ; -webkit-border-radius: 0 0 5px 5px ; -moz-border-radius: 0 0 5px 5px ; border-radius : 0 0 5px 5px ; -webkit-transition: opacity .25s ease .1s ; -moz-transition: opacity .25s ease .1s ; -o-transition: opacity .25s ease .1s ; -ms-transition: opacity .25s ease .1s ; transition : opacity .25s ease .1s ; } .menu li: hover > ul { opacity : 1 ; } .menu ul li { height : 0 ; overflow : hidden ; padding : 0 ; -webkit-transition: height .25s ease .1s ; -moz-transition: height .25s ease .1s ; -o-transition: height .25s ease .1s ; -ms-transition: height .25s ease .1s ; transition : height .25s ease .1s ; } .menu li: hover > ul li { height : 36px ; overflow : visible ; padding : 0 ; }

Menu ul { position: absolute; top: 40px; left: 0; opacity: 0; background: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -webkit-transition: opacity .25s ease .1s; -moz-transition: opacity .25s ease .1s; -o-transition: opacity .25s ease .1s; -ms-transition: opacity .25s ease .1s; transition: opacity .25s ease .1s; } .menu li:hover > ul { opacity: 1; } .menu ul li { height: 0; overflow: hidden; padding: 0; -webkit-transition: height .25s ease .1s; -moz-transition: height .25s ease .1s; -o-transition: height .25s ease .1s; -ms-transition: height .25s ease .1s; transition: height .25s ease .1s; } .menu li:hover > ul li { height: 36px; overflow: visible; padding: 0; }

Ширину ссылок ставим = 100px, внизу всех элементов кроме последнего добавляется граница border-bottom. Также, по желанию, вы можете разместить картинки для пунктов подменю (внимание! не забудьте изменить пути к изображениям в коде на используемые вами).

.menu ul li a { width : 100px ; padding : 4px 0 4px 40px ; margin : 0 ; border : none ; border-bottom : 1px solid #353539 ; } .menu ul li: last-child a { border : none ; } .menu a.documents { background : url (../img/docs.png ) no-repeat 6px center ; } .menu a.messages { background : url (../img/bubble.png ) no-repeat 6px center ; } .menu a.signout { background : url (../img/arrow.png ) no-repeat 6px center ; }

Menu ul li a { width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #353539; } .menu ul li:last-child a { border: none; } .menu a.documents { background: url(../img/docs.png) no-repeat 6px center; } .menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; } .menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }

Мне лично нравится простота реализации и использование иконок. Вот итоговый код с codepen:

Вариант от Josh Riser визуально похож на предыдущее выпадающее меню на HTML и CSS. В коде нет дочернего селектора " > " (полезен в многоуровневых конструкциях), но автор удачно использует эффекты CSS3 (transition, box-shadow и text-shadow) для более красивого результата. По ссылке в источнике отсутствует описание процесса создания горизонтального выпадающего меню, поэтому я сразу приведу итоговый код:

В данном примере мы рассмотрим как сделать выпадающее меню на CSS, в котором кроме пунктов будет находится блок поиска. Подобную реализацию часто можно встретить в современных . По времени внедрения и сложности решение является чуть сложнее предыдущих. Оно опубликовано в мае 2013, поэтому, возможно, некоторые вещи вам придется подправить, хотя при нашем тестировании все отлично работало.

HTML код

Для навигации, как всегда, используется неупорядоченный список (с классом nav). Обычные пункты меню являются элементами списка (li) и содержат ссылки (a href) без каких-либо классов и ID. Исключением являются 3 специализированных элемента данного горизонтального выпадающего меню с такими ID:

settings — ссылка картинка;
search — блок с поиском и соответствующей кнопкой;
options — содержит подменю (реализовано через список с классом subnav).

Также в коде увидите скрипт prefixfree для использования свойств CSS без префиксов. Итоговый вариант HTML для выпадающего меню имеет вид:

Application
Board
Options
- Settings
- Application
- Board
- Options

Application
Board
Options
- Settings
- Application
- Board
- Options

CSS для меню

1. Базовые стили и элементы меню

Во-первых, указываем шрифт Montserrat, темный серый фон и фиксированную высоту для пунктов меню. Все элементы имеют выравнивание float: left и позиционирование relative дабы потом можно было добавить подменю с position: absolute;

@import url (http: //fonts.googleapis .com/css?family= Montserrat) ; * { margin : 0 ; padding : 0 ; } .nav { background : #232323 ; height : 60px ; display : inline-block ; } .nav li { float : left ; list-style-type : none ; position : relative ; }

@import url(http://fonts.googleapis.com/css?family=Montserrat); * { margin: 0; padding: 0; } .nav { background: #232323; height: 60px; display: inline-block; } .nav li { float: left; list-style-type: none; position: relative; }

2. Оформление ссылок

Для пунктов меню применяется базовое оформление + . Высота такая же как и в классе nav. Для #settings ссылки-картинки в начале меню задается выравнивание.

.nav li a { font-size : 16px ; color : white ; display : block ; line-height : 60px ; padding : 0 26px ; text-decoration : none ; border-left : 1px solid #2e2e2e ; font-family : Montserrat, sans-serif ; text-shadow : 0 0 1px rgba (255 , 255 , 255 , 0.5 ) ; } .nav li a: hover { background-color : #2e2e2e ; } #settings a { padding : 18px ; height : 24px ; font-size : 10px ; line-height : 24px ; }

Nav li a { font-size: 16px; color: white; display: block; line-height: 60px; padding: 0 26px; text-decoration: none; border-left: 1px solid #2e2e2e; font-family: Montserrat, sans-serif; text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); } .nav li a:hover { background-color: #2e2e2e; } #settings a { padding: 18px; height: 24px; font-size: 10px; line-height: 24px; }

3. Блок поиска

Данный элемент имеет фиксированную ширину и состоит из нескольких частей — поля ввода (#search_text) с зеленым фоном и кнопки поиска (#search_button). В некоторых браузерах цвет фона может быть серым.

#search { width : 357px ; margin : 4px ; } #search_text { width : 297px ; padding : 15px 0 15px 20px ; font-size : 16px ; font-family : Montserrat, sans-serif ; border : 0 none ; height : 52px ; margin-right : 0 ; color : white ; outline : none ; background : #1f7f5c ; float : left ; box-sizing : border-box ; transition : all 0.15s ; } :: -webkit-input-placeholder { /* WebKit browsers */ color : white ; } : -moz-placeholder { /* Mozilla Firefox 4 to 18 */ color : white ; } :: -moz-placeholder { /* Mozilla Firefox 19+ */ color : white ; } : -ms-input-placeholder { /* Internet Explorer 10+ */ color : white ; } #search_text : focus { background : rgb (64 , 151 , 119 ) ; } #search_button { border : 0 none ; background : #1f7f5c url (search.png ) center no-repeat ; width : 60px ; float : left ; padding : 0 ; text-align : center ; height : 52px ; cursor : pointer ; }

#search { width: 357px; margin: 4px; } #search_text{ width: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif; border: 0 none; height: 52px; margin-right: 0; color: white; outline: none; background: #1f7f5c; float: left; box-sizing: border-box; transition: all 0.15s; } ::-webkit-input-placeholder { /* WebKit browsers */ color: white; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: white; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: white; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: white; } #search_text:focus { background: rgb(64, 151, 119); } #search_button { border: 0 none; background: #1f7f5c url(search.png) center no-repeat; width: 60px; float: left; padding: 0; text-align: center; height: 52px; cursor: pointer; }

4. Выпадающее подменю

Финальный штрих позволит нам как сделать выпадающее меню на CSS, которое срабатывает для последнего пункта #options.

#options a{ border-left : 0 none ; } #options > a { background-image : url (triangle.png ) ; background-position : 85% center ; background-repeat : no-repeat ; padding-right : 42px ; } .subnav { visibility : hidden ; position : absolute ; top : 110% ; right : 0 ; width : 200px ; height : auto ; opacity : 0 ; transition : all 0.1s ; background : #232323 ; } .subnav li { float : none ; } .subnav li a { border-bottom : 1px solid #2e2e2e ; } #options : hover .subnav { visibility : visible ; top : 100% ; opacity : 1 ; }

#options a{ border-left: 0 none; } #options>a { background-image: url(triangle.png); background-position: 85% center; background-repeat: no-repeat; padding-right: 42px; } .subnav { visibility: hidden; position: absolute; top: 110%; right: 0; width: 200px; height: auto; opacity: 0; transition: all 0.1s; background: #232323; } .subnav li { float: none; } .subnav li a { border-bottom: 1px solid #2e2e2e; } #options:hover .subnav { visibility: visible; top: 100%; opacity: 1; }

В стилях найдете вставку фонового изображения треугольника (triangle.png) для обозначения подменю — не забудьте указать правильный путь для этой и других картинок в примере. Появлением подменю реализуется с помощью свойства opacity. Итоговое решение на codepen:

В данном варианте в основном используются приемы CSS2.1, решение плюс-минус новое — за март 2015. Если вам не хватает одного подуровня в горизонтальном выпадающем меню для сайта, то этот пример содержит сразу три. С помощью псевдокласса:only-child для пунктов добавляется символ «+» обозначающих наличие подменю.

В целом, неплохой и несложный пример. Не будем детально описывать процесс реализации, т.к. он похож на предыдущие — сначала создаете HTML каркас, а потом постепенно добавляете для него стили. Итоговый код скачивайте по ссылке на источник, частично его можно глянуть в Codepen:

Итого

Выше мы рассмотрели 4 варианта как сделать выпадающее меню на CSS + HTML для , хотя подобных примеров в сети гораздо больше. Есть решения с jQuery, но это, скорее всего, пригодится только для реализации каких-то специальных эффектов и нестандартных задач. В большинстве случаев хватит связки CSS + HTML, тем более, что сейчас главные требования к меню — это удобство и быстрая скорость загрузки.

Напоследок два замечания по кодам выше. В некоторых примерах для выпадающего меню в CSS используются изображения, поэтому вам придется внимательно просмотреть пути к картинкам и указать правильные значения для своего сайта. Во-вторых, часть решений 2х-3х летней давности, поэтому следует еще раз дополнительно проверять их работоспособность в разных браузерах.

Если знаете еще какие-то интересные современные реализации горизонтальных выпадающих меню для сайта, присылайте ссылки в комментариях.

Здравствуйте, уважаемые читатели моего блога! Сегодняшняя статья будет очень полезная для начинающих верстальщиков. Так как сегодня мы будем с вами верстать простое горизонтальное меню. Перед тем как мы приступим непосредственно к верстке, хочу пару слов сказать о том, почему я решил выбрать именно эту тему для статьи.

На самом деле все достаточно просто, когда я думал над темой очередного урока для сайта я начал вспоминать и анализировать свой опыт изучения верстки, то с чем мне приходилось сталкиваться на начальном этапе становления себя как верстальщика, что больше всего мне было непонятно при изучении данной области и т.д. Все эти вопросы я задавался себе, чтобы лучше всего разобраться в том, что может быть интересно человеку, который начинает свой путь верстальщика. И лично у меня, как только я начинал изучать верстку, больше всего возникало вопросов по верстке различных меню, особенно если речь идет о многоуровневом меню. И поэтому сегодня мы будем говорить о меню, а конкретней о горизонтальном меню. Итак начинаем!

Начинаем верстку нашего горизонтального меню!

Как вы наверняка догадываетесь первым делом нам нужно создать html стараницу со стандартной разметкой и подключить к ней файл стилей. Не буду подробно останавливаться на данном шаге, так как все-таки надеюсь, что вы не настолько начинающие, чтобы подробно разсказывать вам, что такое body и head и как подключаются стили. Скажу лишь, что помимо стилей для нашего меню в файл css я напишу самый простой reset, чтобы обнулить стили и добиться одинакового отображения отступов во всех браузерах. Вот собственно так выглядит мой простейший ресет:

Про обнуление стилей тоже пока ничего подробно говорить не буде, так как по сути это тема для еще одной статьи, единственное, что вам нужно знать о вышеописанном коде, это то что благодаря данному коду у всех элементах страницы которые мы будем писать обнулятся отступы margin и padding, это нужно делать, для того чтобы наша страница одинаково выглядела во всех браузерах.

Итак что в нас есть на данном этапе? У нас есть html страница со стандартной разметкой:

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

И у нас есть подключенный к данной странице файл стилей (у меня это style.css), со следующем содержимым:

Следующим этапом будет создания html разметки для нашего меню.

Создаем разметку для меню

В нашей разметке мы будем использовать новый тег , который появился в HTML5, я решил вас сразу приучать к новым тегам, чтобы так сказать следовать тренду и стандарту.Несмотря на то, что новые теги HTML 5 не поддерживаются старыми браузерами я все же настоятельно рекомендую использовать их в своей верстка, так как рано или позно вам всеравно нужно будет перейти на них, как в свое время верстальщики перешли от с табличной верстке к блочной, такова реальность, лучше следовать тренду!

И раз мы уже заговорили о поддержке новых тегов html 5, чтобы у нас не возникало проблем с этим в старых браузерах, в наш документ нужно подключить специальную библиотеку — html5shiv. Делается это вставкой в
раздел head вашей страницы следующего кода:

Все после этого тег (и другие теги оносящиеся к HTML5) будут нормально восприниматься старыми браузерами.

Вернемся непосредственно к нашей разметке. Далее нам нужно в наш тег вставить маркированый список, у меня это выглядит так:

Главная
О нас
Портфолио
Блог
Контакты

Итак с разметкой мы вроде закончили пора приступать непосредственно к написанию стилей, так как сейчас наше меню выглядит мягко говоря не очень:

Пишем стили нашего горизонтального меню

И так первым делом при верстке меню нам нужно убрать маркеры списка, они нам явно не нужны, делается это так:

Ul{ list-style:none; }

После этого наше меню станет таким:

Мне не очень нравится, что наше меню прилеплено к краям браузера, давайте исправим это:

Данным кодом мы задали ширину нашему меню, дали ему отступы сверху и низу по 50px и расположили по центру. Кто не знает если в блочного элемента есть ширина то для того чтобы расположить данный элемент строго по центру нам нужно всего лишь задать ему внешний отступ (margin) справа и слева со значением auto.

Следующим этапом нам нужно уже наконец-то сделать наше меню горизонтальным, делается это заданием элементам

float: left

Menu li{ float:left; }

Все теперь наше меню стало горизонтальным.

Если вы не поняли, что именно случилось и что делает свойство float рекомендую погуглить информацию о данном свойстве и хорошенько изучить его, так как
без него не обходится ни одна страница верстки, это я вам точно говорю. Ну да ладно продолжаем!

Menu li а{ display:block;/* Делаем ссылку блочным элементом*/ padding:12px 20px;/* Задаем внутрение отступы */ text-decoration: none; /* убираем нижнее подчеркивание */ color:#fff;/* делаем цвет ссылки белым */ background:#444;/* делаем цвет фона темным */ font:14px Verdana, sans-serif;/* задаем размер и название шрифта */ }

Здесь одно из самых важных правил — display:block;. Дело в том, что по умолчанию ссылки являются строчными элементами, а к строчным элементам отступы в разных браузерах применяются по разному, поэтому желательно ссылку сделать блочным элементом и только тогда применять к ней свойства связанные с внешним или внутренним отступами. Сейчас не хочется нагружать вас лишней информацией со временем на реальных примерах вы сами поймете зачем здесь делается такой акцент.

Давайте посмотрим что у нас получилось, обновляем страницу браузера и тадам!:

Как видите выглядит не плохо, можно сказать, что в принципе наше меню готово. Единственное, что нужно еще сделать — это задать свет ссылок при наведении, ну еще как мне кажется меню лучше будет смотреться с разделителями между пунктами.

Начнем с разделителей:

Menu li{ border-left:1px solid #666; } .menu li:first-child{ border-left:none; }

Что мы здесь сделали? Да все очень просто мы задали для наших пунктов (

) границу слева размером в 1px и цветом #666;. Что касается селектора.menu li:first-child , то здесь мы используем специальный псевдо- класс, который позволяет выбрать первый дочерний элемент списка. Про псевдоклассы тоже рекомендую более подробно почитать в интернете, узнаете много полезного.

Опять смотрим, что у нас получилось:

По моему с разделителями намного лучше.

Menu li a:hover{ background:#888; }

Опять используя специальный псевдокласс, в это раз — hover, мы задаем цвет ссылке при наведении на неё курсора, смотрим:

По моему крутяк 🙂 , надеюсь у вас вышло такое же меню как у меня.

На этом буду заканчивать данный урок, очень надеюсь, что он вам был полезен и теперь вы знаете, как верстать простое горизонтальное меню на чистом html и css . Конечно, мы сверстали одноуровневое меню, немного сложней будет с двухуровневым мену (с вложенным списком), но это уже тема для другого урока, на этом у меня все. Заходите еще, буду рад!!!

Задача

Создать выпадающее меню инструментами CSS и HTML.

Решение

Для начала давайте создадим список, разместим его горизонтально и оформим его внешний вид. Это будет основное меню, а потом сделаем для его пунктов выпадающее меню.

Выпадающее меню ul.menu{ padding: 3px; /* убираем отступы */ margin-top: 50px; /* для красоты отодвигаю вниз */ text-align: center; /* выравниваю элементы спаска по центру */ } ul.menu > li{ list-style: none; /* убираем маркеры списка */ display: inline-block; /* разещаем списки горизонтально */ background-color: #D87171; padding: 5px 15px; } /* устанавливаем стиль ссылок в меню */ ul.menu > li > a{ color: #FFFFFF; text-decoration: none; } /* устанавливаем стиль ссылок при наведении курсора */ ul.menu > li > a:hover{ text-decoration: underline; }

У нас получился список такого вида:

Рисунок 1. Подготовительные работы.

Обратите внимание: стиль ссылки меняется при наведении на неё курсора. Это реализовывается с помощью псевдокласса :hover . Этот псевдокласс задаёт стиль элемента при наведении на него курсора, при этом кнопка мыши не нажата. Если есть нажатие кнопки - это уже другой псевдокласс.

Теперь перейдём к решению нашей задачи. Сделаем выпадающее меню для пункта "Услуги", добавим выпадающие разделы: "Купить", "Продать", "Обменять". Эти пункты - это отдельный список, который вложен в тег

Создадим этот список и добавим стили, описывающие его внешний вид.

Теперь у нас получился такой список:

Рисунок 2. Подготовительные работы.

Безусловно, это не то, что нам нужно. По умолчанию этот список должен быть скрыт и становиться видимым только при наведении мыши. Скрыть элемент можно при помощи правила правила {display : none }. А при наведении курсора его нужно активировать сделав снова видимым правила {display : inline-block }.

Выпадающее меню ul.menu{ padding: 3px; margin-top: 50px; text-align: center; } ul.menu > li{ list-style: none; display: inline-block; background-color: #D87171; padding: 5px 15px; } /* устанавливаем стиль ссылок в меню */ ul.menu > li > a{ color: #FFFFFF; text-decoration: none; } /* устанавливаем стиль ссылок при наведении курсора */ ul.menu > li > a:hover{ text-decoration: underline; } /* устанавливаем стиль для внутреннего меню */ .menuInner{ display: none; /* делаем невидимым */ list-style: none; padding: 4px; border: 1px solid #000000; border-radius: 5px; background-color: #FFFFFF; text-align: left; } /* делаем видимым при наведении курсора на блок li */ .menu > li:hover > .menuInner{ display: block; }

Теперь наше меню исчезает и появляется, но нам нужно чтобы оно появлялось поверх существующих элементов, не меняя уже установленные границы существующих блоков.

Чтобы элемент отображался не влияя на отображение других элементов, его нужно спозиционировать со значением absolute .

Выпадающее меню ul.menu{ padding: 3px; margin-top: 50px; text-align: center; } ul.menu > li{ position: relative; /* добавляем позиционирование */ list-style: none; display: inline-block; background-color: #D87171; padding: 5px 15px; height: 20px; /* добавляем высоту */ } /* устанавливаем стиль ссылок в меню */ ul.menu > li > a{ color: #FFFFFF; text-decoration: none; } /* устанавливаем стиль ссылок при наведении курсора */ ul.menu > li > a:hover{ text-decoration: underline; } /* устанавливаем стиль для внутреннего меню */ .menuInner{ display: none; /* делаем невидимым */ list-style: none; padding: 4px; border: 1px solid #000000; border-radius: 5px; background-color: #FFFFFF; text-align: left; } .menu > li:hover > .menuInner{ display: block; position: absolute; top: 30px; left: 0; }

Что мы тут сделали:

правило позиционирования {position : relative ;}. Это сделано для того, чтобы отчёт координат абсолютного позиционирования вложенного списка начался с верхнего левого угла этого блока, а не угла экрана.

Добавили в родительский элемент

правило {height : 20px ;}. Задали ему высоту, чтобы удобней было позиционировать выпадающий список.

Установили абсолютное позиционирование {position : absolute ;} выпадающему списку и установили координаты: top и left .

Теперь выпадающее меню работает корректно.

Рисунок 3. Окончательный вариант.

Конечно, тут можно сделать более красивый внешний вид выпадающего меню, но в рамках нашей задачи и этого достаточно.

Учебная задача решена. Пока.

Где находится горизонтальное меню. Как создать в CSS выпадающее меню

Рекомендуем почитать

Поиск по сайту