Красивое выпадающее меню html. Простое кроссбраузерное горизонтальное меню
Создадим простое горизонтальное меню навигации для сайта. Для этого будем пользоваться простыми приемами, которые в результате дадут корректное отображение нашего меню во всех браузерах.
Итак начнем. Создадим список с названиями нашего меню. В качестве названий пунктов пусть будут такие: "Главная", "Новости", "Продукция", "Услуги", "Партнеры", "Контакты". Создаем новый файл под названием menu.html , например, с помощью программы Dreamweawer или используя обычный блокнот. В нем между тегами body размещаем наше меню. Это обычный маркированный список ul с элементами li . Разумеется, каждый пункт меню делаем ссылкой, где вместо URL вставляем решетку #. Используя программу Photoshop создадим изображение размером 3х30 px, с градиентной заливкой как показано на рисунке ниже. Файл сохраним в формате GIF. Назовем его bg.gif . Данный рисунок будет выступать в качестве фонового изображения нашего меню.
Вот содержимое файла menu.html :
Простое кроссбраузерное горизонтальное меню
- Главная
- Новости
- Продукция
- Услуги
- Партнеры
- Контакты
Теперь отдельно создадим файл стилей под названием main.css . Его листинг приведен полностью ниже.
Ul { margin:0; /*обнуляем отступы*/ padding:0; /*обнуляем отступы*/ float:left; /*выравниваем список по левому краю*/ width:auto;/*задаем ширину авто исходя из типа и содержимого списка*/ background-image: url(bg.gif); /*устанавливаем фоновое изображение*/ background-repeat:repeat-x; /*повторяем наше изображение по горизонтали*/ list-style:none; /*удаляем маркеры списка*/ background-color:#4778c3; /*задаем цвет фона под изображение*/ font-size:13px; /*задаем размер шрифта*/ font-family:Arial, Helvetica, sans-serif; /*устанавливаем шрифт*/ } ul li { float:left; /*выравниваем элементы списка по левому краю*/ } ul a { display:block; /*представляем ссылки меню как блочные элементы*/ width:100px; /*задаем размер блока*/ height:30px; /*и высоту блока*/ text-align:center; /*надпись по центру*/ line-height: 2.1em; /*межстрочный интервал*/ text-decoration:none; /*убираем подчеркивание у ссылок*/ color:#fff; /*цвет текста ссылок - белый*/ border-right:#fff solid 1px; /*бордюр правой стороны блока (белая линия в 1px)*/ } ul a:hover { color:#ccc; /*ссылка меняет цвет при наведении указателя*/ }
Думаю, что по содержимому файла main.css вопросов возникнуть не должно, подсказки в комментариях я написал достаточно подробно и ясно, поэтому повторяться не буду. Не забываем его подключить к нашей странице menu.html с помощью
Подведем итог. В результате мы получили полностью кросбраузерное горизонтальное меню, которое выглядит одинаково не только во всех современных браузерах, но и в таких раритетах, как IE 5.5 и IE 6.0. Все элементы меню представлены как блочные элементы и имеют одинаковые размеры по ширине 100 px и высоте 30px. В качестве разделителя пунктов меню используется оформление блокового элемента с помощью правого бордера белого цвета толщиной в 1px. Это практически самый простой способ реализации горизонтального меню. Разумеется, при желании его можно модифицировать, сделать более красивым и функциональным используя фантазию, свойства css и дополнительные графические элементы. Ну а наше горизонтальное меню выглядит примерно так:
Плюсы этого решения:
Простота выполнения
Простой код
Нет никаких таблиц и javascript
Кроссбраузерность: меню во всех браузерах выглядит одинаково
Используются всего один рисунок
Минимум кода на странице menu.html
Минимум кода для реализации стилей в main.css
Файлы, используемые в данном примере, можно скачать в архиве
Большинство классических сайтов в интернете использует горизонтальное меню в качестве основного элемента навигации. Иногда в нем могут встречаться разные дополнительные фишки — многоуровневые конструкции, иконки для подпунктов, блок поиска, сложные списки и т.п. Недавно в блоге уже была небольшая подборка , а сегодня рассмотрим 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
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х летней давности, поэтому следует еще раз дополнительно проверять их работоспособность в разных браузерах.
Если знаете еще какие-то интересные современные реализации горизонтальных выпадающих меню для сайта, присылайте ссылки в комментариях.
Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML .
Вертикальное менюПервым шагом создания вертикального меню будет создание маркированного списка . Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором "navbar". Каждый элемент
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
#navbar { margin: 0; padding: 0; list-style-type: none; width: 100px; }
Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.
Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.
#navbar a { background-color: #949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid #33ADFF; display: block; } #navbar li { border-left: 10px solid #666; border-bottom: 1px solid #666; }
Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:
Название документа #navbar { margin: 0; padding: 0; list-style-type: none; width: 100px; } #navbar li { border-left: 10px solid #666; border-bottom: 1px solid #666; } #navbar a { background-color: #949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid #33ADFF; display: block; }
Попробовать »При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса:hover.
Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:
#navbar a:hover { background-color: #666; border-left: 5px solid #3333FF; } Попробовать »
Горизонтальное менюВ предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.
Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
#navbar { margin: 0; padding: 0; list-style-type: none; } #navbar li { display: inline; } Попробовать »
Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:
#navbar { margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; } #navbar a { color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; } #navbar a:hover { border-radius: 20px 5px; background-color: #0066FF; } Попробовать »
Выпадающее менюМеню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.
Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:
Подпункты мы разместим в отдельном списке, вложив его в элемент
Попробовать »
Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент
#navbar ul { display: none; } #navbar li:hover ul { display: block; }
Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none; , чтобы они отображались друг под другом.
#navbar, #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar li { float: left; } #navbar ul li { float: none; }
Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative; , а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.
#navbar ul { display: none; position: absolute; top: 100%; } #navbar li { float: left; position: relative; } #navbar { height: 30px; } Попробовать »
Высота для родительского списка была добавлена специально, так как браузеры не учитывают в качестве содержимого элемента плавающий контент, то без добавления высоты наш список будет проигнорирован браузером и контент, следующий за списком, будет обтекать наше меню.
Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:
#navbar ul { display: none; background-color: #f90; position: absolute; top: 100%; } #navbar li:hover ul { display: block; } #navbar, #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar { height: 30px; background-color: #666; padding-left: 25px; min-width: 470px; } #navbar li { float: left; position: relative; height: 100%; } #navbar li a { display: block; padding: 6px; width: 100px; color: #fff; text-decoration: none; text-align: center; } #navbar ul li { float: none; } #navbar li:hover { background-color: #f90; } #navbar ul li:hover { background-color: #666; }
Задача
Создать выпадающее меню инструментами 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 . Этот псевдокласс задаёт стиль элемента при наведении на него курсора, при этом кнопка мыши не нажата. Если есть нажатие кнопки - это уже другой псевдокласс.
Теперь перейдём к решению нашей задачи. Сделаем выпадающее меню для пункта "Услуги", добавим выпадающие разделы: "Купить", "Продать", "Обменять". Эти пункты - это отдельный список, который вложен в тег
Создадим этот список и добавим стили, описывающие его внешний вид.
Выпадающее меню 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{ list-style: none; padding: 4px; border: 1px solid #000000; border-radius: 5px; background-color: #FFFFFF; text-align: left; }
Теперь у нас получился такой список:
Рисунок 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; }
Что мы тут сделали:
Теперь выпадающее меню работает корректно.
Рисунок 3. Окончательный вариант.
Конечно, тут можно сделать более красивый внешний вид выпадающего меню, но в рамках нашей задачи и этого достаточно.
Учебная задача решена. Пока.
Редко можно увидеть на сайте горизонтальные меню, которые выпадают, при наведении мыши, но они очень красивы и функциональны. Или как принято говорить - юзабильные. Сегодня мы создадим юзабильное выпадающее горизонтальное меню на чистом 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
