Css красивое выпадающее меню. Плагин навигации по странице

От автора: всех приветствую. Почему-то выпадающее меню у веб-мастеров ассоциируется со скриптами, но уже давно сделать такую навигацию можно абсолютно спокойно на чистом css. Причем такое меню будет ничем не хуже. Сегодня я вам покажу, как создать в css выпадающее меню. Поделюсь, так сказать, рецептом.

План урока и разметка нашего меню

В общем-то, сначала определимся с тем, как будем создавать само меню. В html5 стандартным способом считается создавать его в контейнере nav с помощью маркированного списка. Давайте именно так и сделаем. Маркеры мы позже уберем с помощью css, в меню они нам совершенно не нужны.

Собственно, я сразу напишу в html разметку с вложенными списками. То есть наши список будет двухуровневым – в нем будут другие списки. А именно, на каждый пункт 1 список, который и будет формировать выпадающее меню.

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

Собственно, вот она, вся разметка:

< nav id = "nav" >

< ul >

< li > < a href = "#" > Пункт1 < / a >

< ul class = "second" >

< li > < a href = "#" > Подпункт< / a > < / li >

< li > < a href = "#" > Подпункт< / a > < / li >

< li > < a href = "#" > Подпункт< / a > < / li >

< / ul >

< / li >

< li > < a href = "#" > Пункт2 < / a >

< ul class = "second" >

< li > < a href = "#" > Подпункт< / a > < / li >

< li > < a href = "#" > Подпункт< / a > < / li >

< li > < a href = "#" > Подпункт< / a > < / li >

< / ul >

< / li >

< li > < a href = "#" > Пункт3 < / a >

< ul class = "second" >

< li > < a href = "#" > Подпункт< / a > < / li >

< li > < a href = "#" > Подпункт< / a > < / li >

< li > < a href = "#" > Подпункт< / a > < / li >

< / ul >

< / li >

< li > < a href = "#" > Пункт4 < / a >

< ul class = "second" >

< li > < a href = "#" > Подпункт< / a > < / li >

< li > < a href = "#" > Подпункт< / a > < / li >

< li > < a href = "#" > Подпункт< / a > < / li >

< / ul >

< / li >

< / ul >

< / nav >

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

Собственно, я задал всей навигации идентификатор nav, а всем вложенным спискам – стилевой класс second, чтобы понимать, что они являются вложенными.

Отлично, разметка у нас готова, можно посмотреть на результат:

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

Пишем css-стили

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

*{ margin: 0; padding: 0; }

margin : 0 ;

padding : 0 ;

#nav{ height: 70px; } #nav ul{ list-style: none; }

#nav{

height : 70px ;

#nav ul{

list - style : none ;

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

#nav > ul > li{ float: left; width: 180px; position: relative; }

#nav > ul > li{

float : left ;

width : 180px ;

position : relative ;

Заметьте, что с помощью знака > мы обращаемся к пунктам списка, который непосредственно вложены в ul, а тот непосредственно вложен в nav. Это очень важно, так как позволяет не применить стиль к пунктам вложенных списков. Дело в том, что по моей задумке в главном списке пункты будут располагаться горизонтально, а во вложенных – вертикально.

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

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

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

Тем временем, вот что у нас уже получилось:

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

#nav li a{ display: block; background: #90DA93; border: 1px solid #060A13; color: #060A13; padding: 8px; text-align: center; text-decoration: none; } #nav li a:hover{ background: #2F718E; }

#nav li a{

display : block ;

background : #90DA93;

border : 1px solid #060A13;

color : #060A13;

padding : 8px ;

text - align : center ;

text - decoration : none ;

#nav li a:hover{

background : #2F718E;

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

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

Заметьте, что в данном случае мы не использовали знак >, поэтому указанные правила применятся ко всем ссылкам, в том числе и тем, что находятся во вложенных пунктах. Итак, теперь имеем следующее:

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

#nav li .second{ display: none; position: absolute; top: 100%; }

#nav li .second{

display : none ;

position : absolute ;

top : 100 % ;

Во-первых, скрываем полностью вложенные списки. Во-вторых, задаем им абсолютное позиционирование и координату top: 100%. Это означает, что выпадающее меню будет отображаться четко под основным пунктом, которому принадлежит, четко под 100% высоты этого пункта.

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

Реализуем выпадение

Нам осталось сделать самое главное – реализовать само выпадение. В этом нет ничего сложного, смотрите на этот код:

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

#nav li:hover .second{

display : block ;

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

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

#nav li li{ width: 180px; }

#nav li li{

width : 180px ;

Все, проблема решена:

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

Переделываем меню в вертикальное

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

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

Теперь остается изменить правила для селектора #nav li .second, то есть для вложенных списков, а именно, их нужно немного по-другому позиционировать. Вот так:

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

#nav li .second{

display : none ;

position : absolute ;

left : 100 % ;

top : 0 ;

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

Поэтому изменяем top: 100% на left: 100%. Кроме этого, координата top нам тоже нужна. Задаем ей 0, чтобы вложенное меню находилось на одном уровне с пунктом, которому соответствуют.

Все, теперь все работает так, как надо. Можете протестировать. Как видите, я не врал, когда говорил, что придется переписать всего несколько строк кода.

Горизонтальное меню с несколькими уровнями

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

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

Разработчики интернет-магазинов, блогов, обучающих сервисов и других ресурсов экспериментируют и создают все более новые и необычные карты. После прочтения статьи вы узнаете, на какие основные группы делятся все виды панелей навигации, сможете опробовать каждую из них, а также научиться писать код меню для сайта 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 Горизонтальная панель
    • Главная
    • О компании
    • Продукция
    • Контакты
      •

      Горизонтальная панель

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

      А теперь вертикально. Я сказал вертикально!

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

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

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

      Вертикальная панель

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

      Как вы уже заметили, главное изменение в этом коде – это отсутствие объявления 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 Выпадающий список
      • Главная
      • Продукция
        • Конфеты
        • Торты
        • Печенье
      • Контакты

      Выпадающий список

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

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

      Итак начнем. Создадим список с названиями нашего меню. В качестве названий пунктов пусть будут такие: "Главная", "Новости", "Продукция", "Услуги", "Партнеры", "Контакты". Создаем новый файл под названием 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

      Файлы, используемые в данном примере, можно скачать в архиве

      Задача центрирования горизонтального меню может оказаться не такой уж простой, особенно для новичков в 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 и поддерживает изменяемый размер текста.

      Хабр, привет!

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

      Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest , это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

      Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.

      В этом обзоре мы рассмотрим многоуровневые меню.

      Flat Horizontal Navigation

      Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
      http://codepen.io/andytran/pen/kmAEy

      Material Nav Header w/ Aligned Dropdowns

      Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
      http://codepen.io/colewaldrip/pen/KpRwgQ

      Smooth Accordion Dropdown Menu

      Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
      http://codepen.io/fainder/pen/AydHJ

      Pure CSS Dark Inline Navigation Menu

      Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
      http://codepen.io/3lv3n_snip3r/pen/XbddOO

      Pure CSS3 Mega Dropdown Menu With Animation

      Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
      Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
      Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs

      CSS3 Dropdown Menu

      Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
      http://codepen.io/ojbravo/pen/tIacg

      Simple Pure CSS Dropdown Menu

      Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
      http://codepen.io/Responsive/pen/raNrEW

      Bootstrap 3 mega-dropdown menu

      Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
      http://codepen.io/organizedchaos/full/rwlhd/

      Flat Navigation

      Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
      http://codepen.io/andytran/pen/YPvQQN

      3D nested navigation

      Горизонтальное меню с очень крутой анимацией без js!
      http://codepen.io/devilishalchemist/pen/wBGVor

      Responsive Mega Menu - Navigation

      Горизонтальное адаптивное меню. Выглядит неплохо, но мобильная версия немного "хромает". Используется css, html и js.
      http://codepen.io/samiralley/pen/xvFdc

      Pure Css3 Menu

      Оригинальное меню. С простым и чистым кодом без js. Применяйте для "вау" эффектов.
      http://codepen.io/Sonick/pen/xJagi

      Full CSS3 Dropdown Menu

      Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
      http://codepen.io/daniesy/pen/pfxFi

      Css3 only dropdown menu

      Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
      http://codepen.io/riogrande/pen/ahBrb

      Dropdown Menus

      Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
      http://codepen.io/kkrueger/pen/qfoLa

      Pure CSS DropDown Menu

      Примитивное, но эффективное решение. Только css и html.
      http://codepen.io/andornagy/pen/xhiJH

      Pull Menu - Menu Interaction Concept

      Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
      http://codepen.io/fbrz/pen/bNdMwZ

      Make Simple Dropdown Menu

      Чистый и простой код, без js. В ie8 точно работать будет.
      http://codepen.io/nyekrip/pen/pJoYgb

      Pure CSS dropdown

      Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
      http://codepen.io/jonathlee/pen/mJMzgR

      Dropdown Menu

      Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
      http://codepen.io/MeredithU/pen/GAinq

      CSS 3 Dropdown Menu

      Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
      http://codepen.io/ibeeback/pen/qdEZjR

      Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
      http://codepen.io/martinridgway/pen/KVdKQJ

      CSS3 Menu Dropdowns (особенное решение)!

      Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
      http://codepen.io/cmcg/pen/ofFiz

      П.С.
      Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
      Всем приятной работы.