Давно хотел написать статью о том, как сделать подменю на CSS . Многие делают его на JQuery и получается достаточно неплохо, однако, весь базовый принцип создания подменю на CSS я изложу здесь. А уже дальше, отталкиваясь от этой базы, можно совершенствовать подменю дальше.

Привожу сразу CSS-код :

* html ul li {
float: left;
}
* html ul li a {
height: 1%;
}
ul {
border-bottom: 1px solid #000;
list-style: none;
margin: 0;
padding: 0;
width: 100px;
}
ul li {
position: relative;
}
ul li a {
display: block;
border: 1px solid #000;
border-bottom: 1px;
padding: 5px;
text-decoration: none;
}
li ul {
display: none;
left: 99px;
position: absolute;
top: 0;
}
li:hover ul {
display: block;
}

Самое главное здесь - это селектор "li:hover ul ". Фактически, он и показывает содержимое меню. По умолчанию, оно "display: none ", а при наведении курсора на пункт меню, подменю становится: "display: block ", то есть видимым. Это самое главное. Также в первых двух селекторах (которые со * ) идёт CSS-хак для IE , иначе без него в этом браузере ничего работать не будет. Всё остальное - это внешний вид, который, безусловно, можно менять.

Привожу и HTML-код :

• 
  Главная


• 
  Меню 1
  
  
  
  • 
    Подменю 1
    
  
  
  • 
    Подменю 2
    
  
  
  • 
    Подменю 3
    
  
  
  
  


• 
  Меню 2
  
  
  
  • 
    Подменю4
    
  
  
  • 
    Подменю 5
    
  
  
  • 
    Подменю 6
    
  
  
  • 
    Подменю7
    
  
  
  • 
    Подменю 8
    
  
  
  
  

Если внимательно вдуматься в эту структуру, то становится всё очень понятно. Тег ul - создаёт меню. Если ul находится внутри другого ul , то это уже подменю. А тег li отвечает за конкретный пункт меню.

Разумеется, меню самое наипростейшее, как с точки зрения логики и структуры, так и с точки зрения дизайна. Разумеется, можно с помощью JQuery сделать плавное раскрытие. Можно также изменить дизайн, но весь принцип останется тем же, что и в этом подменю, написанном на CSS и HTML .

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

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

Верстаем меню HTML + CSS

Для начала, чтобы нам было с чем работать, давайте сверстаем простое одноуровневое меню. Не будем сильно заморачиваться с дизайном, для наглядности хватит и этого:

Что мы имеем? Самый обыкновенные ненумерованный список с идентификатором «top_menu» и со ссылками, обернутыми в элементы этого самого списка. Все банально и просто. При наведении пункты меню меняют цвет… это все вы уже знаете и понимаете, как это сделать (я надеюсь).

Добавляем меню второго уровня

Чтобы сделать многоуровневое меню, нам нужно добавить второй ненумерованный список внутрь первого. Думаю, это вы проходили где-то на начальных уроках. А также то, что его вставить нужно не просто внутри нашего списка, а именно внутри элемента списка, то есть тега «li », сразу после закрывающего тега «a».

Позиционируем вложенные списки абсолютно по отношению к «li », в которые они вложены. А все «li » верхнего уровня позиционируем относительно (relative ). Чтобы выпадающее меню находилось СРАЗУ же после нашего меню верхнего уровня, ему (выпадающему – “inner_menu ”) нужно задать

Position: absolute; top: 100%;

То есть отступ от верхней границы родителя будет равен высоте родителя. Очень логично, по-моему.

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

Как видите, наше выпадающее меню пока выглядит не выпадающим, а выпавшим и висящим. Но ничего, это мы скоро исправим.

Как сделать выпадающее меню действительно выпадающим

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

Выпадающему меню добавляем:

Display: none;

А чтобы его отобразить, нужно прописать:

#top_menu > li:hover > ul { display: block; }

Что нам говорит это целое скопище селекторов? Читаем с конца. Мы задаем стили (видмости) для списка второго уровня, который лежит внутри элемента списка первого уровня, но стили эти сработают только в том случае, если мы наведем мышкой (ховер) на элемент « li» в который вложен наш список второго уровня.

Надеюсь, я выразился понятно. Если нет, попробуйте прочитать несколько раз. А еще лучше просто понимать это, глядя на код. Смотрим, что у нас получилось:

Да, мы вроде бы добились того, чего хотели – мы сделали выпадающее меню, самое настоящее выпадающее меню, мать его! Но ему чего-то не хватает. А знаете чего? Плавности! Ведь все выглядит так, как будто меню не выпадает, а просто появляется. Причем очень резко, моментально даже, я бы сказал.

Ну что же, давайте еще немного поколдуем над ним.

Плавное выпадающее меню – это просто

Итак, давайте сделаем плавное выпадающее меню на чистом CSS. Зачем это делать? Потому что люди любят, когда все плавненько и мягонько… и это выглядит красиво. Будет плюс к юзабилити вашего сайта. Погнали!

Запомните, вы можете анимировать только точные математические величины, например 50px и 300px, 0 и 100%, 0,5 и 1,0 и так далее. В нашем случае мы не сможем анимировать два состояния нашего выпадающего меню (display:none; и display:block; ).

Но мы можем заменить их на прозрачность – opacity:0 и opacity:1. И задать время в течение которого наше меню будет проявляться из прозрачного состояния. Да, это действительно сработает, однако это не совсем тот эффект, который вы возможно ожидали. Поэтому давайте сделаем немного сложнее. Но это того стоит, поверьте.

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

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

Что нам понадобилось для анимации? Два состояния пунктов нашего меню, а также свойство transition, которое проинтерполировало эти состояния, то есть заполнило все промежуточные значения за отведенный промежуток времени. Вот и все!

Еще проще можно было бы сделать с применением jQuery, но мы же оговорили сначала, что будем сегодня работать с чистым CSS. А еще красивее можно было сделать, добавив к анимациям кривые Безье, однако эта тема немного выходит за рамки сегодняшней. Но мы к ней обязательно вернемся позже.

Вывод:

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

Кстати это был мой первый урок по CSS. Опишите, как вам? Понятно все объяснил или нужно еще подробнее разжевывать? И стоит ли вообще продолжать писать статьи на тему лайфхаков в CSS?

Спасибо за внимание и до скорых встреч!

Вы дочитали до самого конца?

Была ли эта статься полезной?

Да Нет

Что именно вам не понравилось? Статья была неполной или неправдивой?
Напишите в клмментариях и мы обещаем исправиться!

Июль 2, 2016

Сегодня вертикальное выпадающее меню на css сделать не проблема и я покажу вам сегодня как это делается, абсолютно без скриптов.

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

Полная разметка

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

• Пункт 1
  
  
  
  • Подпункт
  
  
  • Подпункт
  
  
  • Подпункт
  
  
  
  


• Пункт 2
  
  
  
  • Подпункт4
  
  
  • Подпункт4
  
  
  • Подпункт4
  
  
  
  


• Пункт 3
  
  
  
  • Подпункт7
  
  
  • Подпункт7
  
  
  • Подпункт7
  
  
  
  


• Пункт 4
  
  
  
  • Подпункт8
  
  
  • Подпункт8
  
  
  • Подпункт8
  
  
  
  

В принципе тут все очень просто. Все меню лежит в контейнере nav , там уже мы создаем список и его пункты. Но поскольку наше меню двухуровневое, то в каждый пункт списка (li) мы дополнительно вкладываем список с классом second-ul (типа вложенный ul). Название класса роли не играет. И так делаем с каждым пунктом. Если вы внимательно изучите разметку на примере одного пункта, то все поймете, вот еще раз:

Пункт 1

• Подпункт


• Подпункт


• Подпункт

То есть мы в пункт вкладываем список, в котором в свою очередь располагаются вложенные пункты. На этом с html-разметкой все, переходим в css, где все гораздо интереснее.

Оформление нашего меню

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

*{ margin: 0; padding: 0; } #nav{ height: 70px; } #nav ul{ list-style: none; }

Вот такие правила первым делом отправляются в таблицу стилей. Посмотрим, как выглядит наше меню:

Ужасно, не так ли? Но ничего, сейчас мы это исправим!

Следующие стилевые правила очень важны именно с эстетической точки зрения — наше меню станет гораздо красивее на вид. Вот все эти правила:

#nav > ul > li{ width: 180px; position: relative; } #nav li a{ display: block; background: #ccc; border: 1px solid #333; color: #fff; padding: 15px; } #nav li a:hover{ background: #999; }

Что я здесь настроил? Во-первых, для пунктов главного списка указал ширину и относительное позиционирование. Оно нужно для того, чтобы потом выполнить абсолютное позиционирование вложенного меню. Далее настраиваем сам внешний вид ссылок. Делаем их блочными, красим в нужный цвет, добавляем отступы, рамку и т.д. По желанию. Также сделаем изменение фонового цвета при наведении. Итог всех этих манипуляций:

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

Делаем вертикальное меню выпадающим

Пока у нас все вложенные меню видно. Это неправильно, по умолчанию их не должно быть на странице, а появляться они должны только при наведении. То есть при наведении на конкретный пункт должно появляться меню только для него. Суть ясна?

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

#nav li .second-ul{ display: block; position: absolute; left: 100%; top: 0; }

То есть для вложенного списка указываем абсолютное позиционирование и сдвиг влево на 100% ширины от ширины родительского блока (пункта списка). А насколько мы знаем, ширина у него 180 пикселей. По высоте вложенное меню должно быть на одном уровне. После этих манипуляций у вас должно получится так:

Ну и собственно теперь замените в стилях для вложенных списков display: block на display: none . После этого подменю пропадут с экрана, что нам и нужно. Мы подходим к самому важному этапу — реализации выпадания на css. Для этого сделаем вот что:

#nav li:hover .second-ul{ display: block; }

Все очень просто, этой строки вам хватит! Тут мы по сути говорим браузеру: при наведении на пункт главного списка делай видимым вложенный список!

Проверяем. Понаводите на каждый пункт и убедитесь, что для каждого пункта выводиться его, уникальное подменю. Вот так это выглядит:

И так будет для каждого пункта. Если вы все делали за мной, то именно так и будет. Правда я еще добавил ширину для вложенных пунктов списка, чтобы они были такими же по размеру, как основные:

#nav li li{ width: 180px; }

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

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

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

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

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

My dashboard Likes Views Documents Messages Sign Out Uploads Videos Documents

• My dashboard
• Likes
• Views
  • Documents
  • Messages
  • Sign Out
• Uploads
• Videos
• Documents

Шаг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-кода и несложных CSS-правил, можно создать отличное выпадающее меню , которое легко менять и дополнять. И для этого нам не понадобится никакой JavaScript-код!

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

• Главная
• Статьи
  • HTML
  • CSS
  • PHP
  • MySQL
• Книги
  • Раскрутка и продвижение
  • Е-Бизнес
  • Web-Дизайн
  • Платежные системы
• О нас

Довольно простой и не сложный получился html-код. Выглядеть этот список будет так .

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

#nav ul { margin: 0px; padding: 0px; list-style:none; width:200px; }

Теперь нам необходимо задать положение элементов списка. Так как наше меню будет вертикальное, это облегчает нашу работу. Однако, нам необходимо задать значение для свойства "position" , как "relative" . Это необходимо для того, чтобы относительно основного меню абсолютно позиционировать подменю. Также зададим нижнее подчеркивание для пунктов меню.

#nav ul li { position: relative; border-bottom:1px solid #ccc; }

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

#nav li ul { position: absolute; left: 200px; top: 0; display: none; }

Используя атрибуты left и top мы задаем абсолютное позиционирование нашего подменю относительно родительского пункта меню. Также я присвоил атрибуту "display" значение "none" , так как мы не хотим видеть подменю при открытии страницы.

Итак, теперь наше меню выглядит так.

Теперь придадим вид нашим ссылкам. В первую очередь для того, чтобы каждая ссылка занимала всё отведённое для неё место внутри содержащего её элемента списка, присвоим атрибуту "display" значение "block" . Также уберем нижнее подчеркивание и зададим цвет фона и цвет текста ссылок.

#nav ul li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; }

#nav li:hover ul { display: block; }

Вот теперь наше меню уже работает и выглядит так .

Осталось придать ему более привлекательный вид.

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

#nav li:hover a { color:#FFFFFF; background: url(img/fone-tr.png); }

Здесь я в качестве фона использую вот эту картинку , но Вы можете использовать и заливку любым другим цветом (например: background-color:#0000ff; ).

#nav li:hover ul a:hover { background-color:#cccccc; background-image:none; color:#FFFFFF; }

Ну вот и все! Наше выпадающее меню на html и CSS готово. Можете посмотреть, что у нас получилось .

На этом казалось бы можно было закончить, но нет. К сожалению ранние версии Internet Explorer понимают псевдокласс :hover лишь для тега - так что li:hover , на который у нас завязано появление подменю и изменение цвета фона, ему ни о чём не говорит.

Для того чтобы устранить эту проблему, добавим небольшой JavaScript-код:

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

jsHover = function() { var hEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0, len=hEls.length; i