Как сделать выпадающее меню на CSS и HTML. Большой обзор красивых многоуровневых меню с codepen

Доброго времени суток всем, кто сейчас читает данную публикацию. Сегодня я хочу рассказать вам об одном из инструментов сайтостроения, без которого ни один веб-ресурс не может обойтись. Это меню сайта, или как еще говорят карта сайта. На сегодняшний день существует безграничное множество видов и подвидов меню.

Разработчики интернет-магазинов, блогов, обучающих сервисов и других ресурсов экспериментируют и создают все более новые и необычные карты. После прочтения статьи вы узнаете, на какие основные группы делятся все виды панелей навигации, сможете опробовать каждую из них, а также научиться писать код меню для сайта html. А теперь перейдем непосредственно к делу!

В языке разметки существует несколько способов создания меню. Основная их концепция заключается в использовании ненумерованного списка. Таким образом, в привычном для нас html 4 разработчики прописывают на станице теги

и
• .

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

  создает маркированный список, а
  • — один элемент списка. Для наглядности давайте напишем код простого меню:

    Навигация

    Навигация сайта

    • Главная
    • Новости недели
    • Технологические достижения
    • Чат

    Однако с появлением платформы язык разметки пополнился дополнительными тегами. Именно поэтому меню современных веб-сайтов создается при помощи специального тега < menu> . В использовании этот элемент ничем не отличается от маркированных списков.

    Вместо единицы < ul> прописывается < menu> . Однако существенные различия появляются если судить со стороны работы . Так, второй пример ускоряет работу поисковых программ и роботов в . При анализе структуры сайта они сразу понимают, что данный кусок кода отвечает за карту сайта.

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

    Создадим-ка горизонтальную навигационную модель

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

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

    Для трансформации мы используем свойство css под названием transform . Чтобы указать трансформацию, используется встроенная функция skewX , в которой угол наклона указывается в градусах.

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

    • -ms- (Internet Explorer)
    • -o- (Opera)
    • -webkit- (Chrome, Safari)
    • -moz- (Firefox)

    А теперь полученные знания применим к написанию примера.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

    Горизонтальная панель Главная О компании Продукция Контакты

    Горизонтальная панель li { display: inline-block; margin-right: 6px; background: #FF8C00; transform: skewX(-45deg); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg); -ms-transform: skewX(-45deg); -moz-transform: skewX(-45deg); } a { display: block; padding: 18px 35px; color: #fff; transform: skewX(40deg); -webkit-transform: skewX(40deg); -o-transform: skewX(40deg); -ms-transform: skewX(40deg); -moz-transform: skewX(40deg); } li:hover { background: #1C1C1C; }

  • Главная
  • О компании
  • Продукция
  • Контакты
  А теперь вертикально. Я сказал вертикально!

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

  Для этого я воспользовался еще одним свойством css border-radius .

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

  Вертикальная панель li{ display: block; margin: 13px; padding: 13px; background: #FF8C00; width:20%; text-align:center; font-size:20px; border-radius:10px; } a { color: #fff; } li:hover { background: #1C1C1C; }

  • Главная
  • О компании
  • Продукция
  • Контакты

  Как вы уже заметили, главное изменение в этом коде – это отсутствие объявления display: inline-block , который собственно и отвечал за горизонтальное расположение пунктов навигации.

  Подпункты в меню: выпадающий список

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

  

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

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

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

  Выпадающий список body { padding-left: 30%; font-size: 18px; } .m-menu { margin: 0; padding: 9px; width:50%; text-align:center; border: 3px solid #000; background: #FF8C00; } .m-menu > li { position: relative; display: inline-block; } .m-menu a { display: block; margin-left: -2px; padding: 13px; color: #fff; border-left: 3px solid #fff; } .m-menu a:hover { background: #1C1C1C; } .m-menu .s-menu { left: 10px; position: absolute; display: none; width: 155px; margin: 0; padding: 0; list-style: none; background: #FF8C00; } .m-menu .s-menu a { border: 1px solid #000; } .m-menu > Главная Продукция Конфеты Торты Печенье Контакты

  Выпадающий список body { padding-left: 30%; font-size: 18px; } .m-menu { margin: 0; padding: 9px; width:50%; text-align:center; border: 3px solid #000; background: #FF8C00; } .m-menu > li { position: relative; display: inline-block; } .m-menu a { display: block; margin-left: -2px; padding: 13px; color: #fff; border-left: 3px solid #fff; } .m-menu a:hover { background: #1C1C1C; } .m-menu .s-menu { left: 10px; position: absolute; display: none; width: 155px; margin: 0; padding: 0; list-style: none; background: #FF8C00; } .m-menu .s-menu a { border: 1px solid #000; } .m-menu > li:hover .s-menu { display: block; }

  • Главная
  • Продукция
    • Конфеты
    • Торты
    • Печенье
  • Контакты

  Задача центрирования горизонтального меню может оказаться не такой уж простой, особенно для новичков в CSS. Поиск решений приводит к весьма ограниченному списку методов, основная часть которых полагается на трюки CSS, JavaScript или использование нестандартных правил, которые поддерживаются не всеми браузерами. В данном уроке мы разберем метод центрирования горизонтального меню, который использует только стандартные правила CSS и работает во всех браузерах.

  Пример центрированного меню

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

  На демонстрационной странице можно увидеть несколько вариантов оформления горизонтально центрированного меню. Любой из них можно использовать в своих проектах.

  Разметка HTML

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

  • Первая закладка
  • Вторая закладка
  • Третья закладка
  • Четвертая закладка
  Код CSS центрированного меню

  Ниже приводится полный код CSS, с помощью которого центрируется меню. А объяснения принципа работы приводятся далее в уроке.

  #centeredmenu { float:left; width:100%; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; } #centeredmenu ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; } #centeredmenu ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; } #centeredmenu ul li a { display:block; margin:0 0 0 1px; padding:3px 10px; background:#ddd; color:#000; text-decoration:none; line-height:1.3em; } #centeredmenu ul li a:hover { background:#369; color:#fff; } #centeredmenu ul li a.active, #centeredmenu ul li a.active:hover { color:#fff; background:#000; font-weight:bold; }

  Как работает метод центрирования

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

  

  Элемент div (блочный) без смещения растягивается на всю доступную ему ширину.

  

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

  Стандартное выровненное влево меню

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

  

  Обратите внимание на следующие моменты:

  • Элемент centeredmenu div (голубой прямоугольник) смещается влево, но имеет ширину 100%, поэтому остается растянутым на всю страницу.
  • Элемент ul (розовый прямоугольник) находится внутри элемента centeredmenu div и смещается влево. Это означает, что он будет ужат до ширины своего содержимого, то есть до суммарной ширины всех закладок.
  • Все элементы li (зеленые прямоугольники) находятся внутри элемента ul и смещаются влево. Таким образом, они ужимаются до размеров ссылок в них и выстраиваются в одну горизонтальную линию.
  • Внутри каждой ссылки (оранжевые прямоугольники) выводится текст закладки: Закладка 1, Закладка 2 и так далее.
  Смещаем положение неупорядоченного списка

  
  

  Затем мы смещаем элемент ul вправо на 50% с помощью свойства position:relative; . Когда элемент смещается с указанием процента при таких условиях важно помнить, что суммарная ширина содержащихся в нем элементов не является его шириной. В нашем случае смещение происходит на половину окна браузера (или доступного для вывода пространства).В результате наше меню начинается на середине окна и частично выходит за его пределы. И переходим к следующему шагу.

  Сдвигаем положение всех элементов меню

  
  

  Осталось только сдвинуть все элементы li влево на 50%. Это 50% ширины нашего элемента ul (контейнера, который содержит меню). Таким образом, закладки смещаются точно на центр окна.

  Несколько важных замечаний

  При использовании данного метода центрирования надо помнить о нескольких важных моментах:

  • Так как элемент ul частично выходит за рамки окна, то это приводит к выводу полос прокрутки. Поэтому нужно использовать правило overflow:hidden; для элемента centeredmenu div . Таким образом, выступающая часть элемента div будет обрезана.
  • Так как элемент ul не выровнен по закладкам, то нельзя использовать никаких визуальных стилей для него. Оставьте элемент ul без фонового цвета и без рамки, чтобы он стал полностью невидимым. А стили для закладок нужно использовать только для элементов li .
  • Если нужно задать особенные стили для первой и последней закладки, нужно добавить класс для первого и последнего элементов li , чтобы можно было стилизовать их индивидуально.
  Заключение

  Предложенное решение совместимо со всеми браузерами, не использует JavaScript и поддерживает изменяемый размер текста.

  Большинство классических сайтов в интернете использует горизонтальное меню в качестве основного элемента навигации. Иногда в нем могут встречаться разные дополнительные фишки — многоуровневые конструкции, иконки для подпунктов, блок поиска, сложные списки и т.п. Недавно в блоге уже была небольшая подборка , а сегодня рассмотрим 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х летней давности, поэтому следует еще раз дополнительно проверять их работоспособность в разных браузерах.

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

  Задача

  Создать выпадающее меню инструментами 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; }

    • Главная
    • Контакты
    • Услуги
      • Купить
      • Продать
      • Обменять

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

  • правило позиционирования {position : relative ;}. Это сделано для того, чтобы отчёт координат абсолютного позиционирования вложенного списка начался с верхнего левого угла этого блока, а не угла экрана.
  • Добавили в родительский элемент
  • правило {height : 20px ;}. Задали ему высоту, чтобы удобней было позиционировать выпадающий список.
  • Установили абсолютное позиционирование {position : absolute ;} выпадающему списку и установили координаты: top и left .

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

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

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

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

  Здравствуйте уважаемые посетители моего блога! Сегодня речь пойдет о главном горизонтальном меню сайта, а именно как выровнять горизонтальное меню по центру. Да, на первый взгляд, что тут сложного — задал нужные отступы, подогнал и все. Но тут есть свои нюансы. Сайт, в первую очередь, это динамика, т.е. на сайте постоянно появляется новый контент, появляются какие то новые блоки с информацией и т.п. Так могут и появляться/исчезать некоторые пункты в главном меню. С учетом этого всего нужно добиться того, что при добавлении или удалении пункта меню, меню у нас остается все также по центру. Конечно, не всегда обязательно его центрировать, все зависит от дизайна. Но если все же у вас подразумевается ставить горизонтальное меню по центру, то применив несколько несложных трюков в css мы можем добиться нужного результата.

  Структура статьи

  Горизонтальное меню по центру без выпадающих пунктов

  Сначала разберем на примере горизонтального меню, которое не имеет выпадающих пунктов.

  Html-код
  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
  • Пункт 5
  Css-код *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } #mainmenu { background: #444; position: relative; overflow: hidden; height: 40px; margin: 30px 0 } #mainmenu ul { list-style: none; margin: 0; padding: 0; position: relative; left: 50%; float: left; font: 14px Arial, Helvetica, sans-serif; height: 40px } #mainmenu ul li { position: relative; left: -50%; float: left; margin: 0 10px; height: 40px } #mainmenu ul li a { color: #fff; display: block; text-decoration: none; padding: 0 15px; line-height: 40px; } #mainmenu ul li a:hover { background-color: #666; }

  Разберем все по порядку, здесь все просто. Мы создаем контейнер «mainmenu», куда помещаем наше меню в виде неупорядоченного списка.

  Теперь дело идет за стилями css. Сначала мы сбрасываем на ноль все поля и отступы для всех браузеров. Далее при помощи свойства «float:left» мы смещаем наш неупорядоченный список влево и далее относительным позиционированием смещаем его на 50% вправо. Ширина списка «ul» будет равна сумме длин всех пунктов «li», которые находятся внутри него. Таким образом, если мы мысленно поделим окно браузера пополам, то наше меню уйдет вправо от линии разделения. Чтобы выровнять мы применим к пунктам «li» также относительное позиционирование и сместим их влево на 50%, указав свойство «left:-50%». Да и еще, чуть не забыл, нашему контейнеру «mainmenu» нужно обязательно указать свойство «overflow:hidden» , иначе мы получим горизонтальную полосу прокрутки.

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

  Горизонтальное меню по центру с выпадающими пунктами

  Теперь разберем с выпадающими подпунктами. Здесь ситуация несколько иначе и несколько сложнее, т.к. в первом случае у нас подпункты выпадать не будут, потому что мы указали блоку «mainmenu» свойство — «overflow:hidden». Это говорит, что элементы за пределами данного блока показываться не будут. Но выход есть.

  Итак, я изменил предыдущий код и удалил из него свойство «overflow:hidden».

  Html-код
  • Пункт 1
    • подпункт 1.1
      • подпункт 1.1.1
      • подпункт 1.1.2
      • подпункт 1.1.3
    • подпункт 1.2
      • подпункт 1.2.1
      • подпункт 1.2.2
      • подпункт 1.2.3
    • подпункт 1.3
    • подпункт 1.4
    • подпункт 1.5
  • Пункт 2
    • подпункт 2.1
    • подпункт 2.2
    • подпункт 2.3
      • подпункт 2.3.1
      • подпункт 2.3.2
      • подпункт 2.3.3
    • подпункт 2.4
    • Длинный подпункт, длинный подпункт
  • Длинный пункт меню 3
    • подпункт 3.1
    • подпункт 3.2
    • подпункт 3.3
    • подпункт 3.4
    • подпункт 3.5
  • Пункт 4
    • подпункт 4.1
    • подпункт 4.2
    • подпункт 4.3
    • подпункт 4.4
    • подпункт 4.5
  • Пункт 5
    • подпункт 5.1
    • подпункт 5.2
    • подпункт 5.3
    • подпункт 5.4
    • подпункт 5.5
  CSS-код *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } #mainmenu { position: relative; background: #444444; height: 40px; margin: 30px 0; padding: 0; float: left; width: 100%; z-index: 10 } #mainmenu ul { clear: left; position: relative; right: 50%; height: 40px; float: right; text-align: center; font: 15px Arial, Helvetica, sans-serif; list-style: none; padding: 0; margin: 0 } /** Основные пункты **/ #mainmenu > ul > li { position: relative; left: 50%; float: left; height: 40px; padding: 0; margin: 0 } #mainmenu > ul > li > a { border-left: 1px solid #666; display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height: 40px; } #mainmenu > ul > li:first-child > a { border: none } #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a { color: #fff } #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active { background: #666 } /* Выпадающие подпункты */ #mainmenu ul li ul { position: absolute; left: 0; top: 40px; display: none; list-style: none; visibility: hidden; padding: 0; margin: 0; width: 200px } #mainmenu > ul > li ul li { background-color: #666; position: relative; left: 0; display: list-item; float: none; height: auto; margin: 0; text-align: left; } #mainmenu ul li ul li a { border-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; } #mainmenu ul li ul li.parent a { position: relative; } #mainmenu ul li ul > li.parent > a::before { border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); height: 6px; width: 6px; } #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover { background-color: #444 } #mainmenu ul li:hover ul, #mainmenu ul li.hover ul { display: block } /* Выпадающие пункты второго уровня */ #mainmenu ul li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #mainmenu ul li ul li ul { top: 0; left: 200px; margin: 0 0 0 20px; width: 180px }

  Теперь у нас меню выставлено по центру и при наведении выпадают подпункты.

  Выравнивание меню по центру с помощью flexbox

  Выровнять меню по центру можно также, применив новое правило в css - flexbox. Вообще трюкам с flexbox я хочу посвятить отдельный пост, оно того стоит, очень упрощает жизнь верстальщику. В общем, здесь не будем углубляться… Я приведу здесь только код css для меню с выпадающими пунктами. HTML код тот же, что и выше.

  Код CSS *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } #mainmenu { position: relative; background: #444444; height: 40px; margin: 30px 0; padding: 0; width: 100%; z-index: 10 } #mainmenu ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; height: 40px; text-align: center; font: 15px Arial, Helvetica, sans-serif; list-style: none; padding: 0; margin: 0; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } /** Основные пункты **/ #mainmenu > ul > li { position: relative; height: 40px; padding: 0; margin: 0 } #mainmenu > ul > li > a { border-left: 1px solid #666; display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height: 40px; } #mainmenu > ul > li:first-child > a { border: none } #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a { color: #fff } #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active { background: #666 } /* Выпадающие подпункты */ #mainmenu ul li ul { position: absolute; left: 0; top: 40px; display: none; list-style: none; visibility: hidden; padding: 0; margin: 0; width: 200px } #mainmenu > ul > li ul li { background-color: #666; position: relative; left: 0; display: list-item; float: none; height: auto; margin: 0; text-align: left; } #mainmenu ul li ul li a { border-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; } #mainmenu ul li ul li.parent a { position: relative; } #mainmenu ul li ul > li.parent > a::before { border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); height: 6px; width: 6px; } #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover { background-color: #444 } #mainmenu ul li:hover ul, #mainmenu ul li.hover ul { display: block } /* Выпадающие пункты второго уровня */ #mainmenu ul li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #mainmenu ul li ul li ul { top: 0; left: 200px; margin: 0 0 0 20px; width: 180px }

  Как видим, изменились правила только для родительского списка - #mainmenu ul. Единственное, пришлось добавить префиксы для предыдущих версий браузеров. Отмечу, что правило flexbox корректно понимают только современные браузеры. Если вы ориентируетесь на более старые браузеры, то вариант с flex’ом придется отложить. Какие именно браузеры хорошо понимают flexbox можете посмотреть