![](https://habrastorage.org/files/1ba/dfd/a7c/1badfda7c47543c6a3d91161bf32689b.jpg)
Хабр, привет!
На Сodepen появляется много хороших решений от разных специалистов, и я считаю, что лучшие из них нужно собирать в одном месте. Поэтому 2 года назад начал сохранять у себя на компьютере интересные скрипты по разным тематикам.
Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).
Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.
В этом обзоре мы рассмотрим многоуровневые меню.
Flat Horizontal Navigation
![](https://habrastorage.org/files/5cf/a68/cca/5cfa68ccaafa44a78194bbe70013e480.jpg)
Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
http://codepen.io/andytran/pen/kmAEy
Material Nav Header w/ Aligned Dropdowns
![](https://habrastorage.org/files/a59/d12/7e8/a59d127e87fd48eda88fe70c83e28c55.jpg)
Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
Smooth Accordion Dropdown Menu
![](https://habrastorage.org/files/9e8/5a3/799/9e85a3799ebd410d82eb7da14e25f605.jpg)
Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
http://codepen.io/fainder/pen/AydHJ
Pure CSS Dark Inline Navigation Menu
![](https://habrastorage.org/files/1e6/9cf/c52/1e69cfc520b74510ac0453670774fb23.jpg)
Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
Pure CSS3 Mega Dropdown Menu With Animation
![](https://habrastorage.org/files/804/da7/2e6/804da72e6e1c4c3abd16e78aa074826e.jpg)
![](https://habrastorage.org/files/91e/9c4/58d/91e9c458df2f4971a509600772780a94.jpg)
Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs
CSS3 Dropdown Menu
![](https://habrastorage.org/files/cdc/e5f/33d/cdce5f33d3c141a7a95a494794e716fb.jpg)
Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
http://codepen.io/ojbravo/pen/tIacg
Simple Pure CSS Dropdown Menu
![](https://habrastorage.org/files/d4c/9d7/7ea/d4c9d77ea72b42d7a997cbdff10a6bfb.jpg)
Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
http://codepen.io/Responsive/pen/raNrEW
Bootstrap 3 mega-dropdown menu
![](https://habrastorage.org/files/17b/767/904/17b767904cd34d13a233dc0231d09164.jpg)
Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
Flat Navigation
![](https://habrastorage.org/files/f7a/8c8/417/f7a8c8417bd44d98b33da97ef1038b09.jpg)
Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
http://codepen.io/andytran/pen/YPvQQN
3D nested navigation
![](https://habrastorage.org/files/82e/df9/576/82edf95765d9413a840560c0c5d44ae1.jpg)
Горизонтальное меню с очень крутой анимацией без js!
http://codepen.io/devilishalchemist/pen/wBGVor
Responsive Mega Menu — Navigation
![](https://habrastorage.org/files/200/ff6/9c2/200ff69c215847db945d0c1510316ff6.jpg)
Горизонтальное адаптивное меню. Выглядит неплохо, но мобильная версия немного "хромает". Используется css, html и js.
http://codepen.io/samiralley/pen/xvFdc
Pure Css3 Menu
![](https://habrastorage.org/files/69a/ba5/d2f/69aba5d2f86b4100a49ea71dfafb190e.jpg)
Оригинальное меню. С простым и чистым кодом без js. Применяйте для "вау" эффектов.
http://codepen.io/Sonick/pen/xJagi
Full CSS3 Dropdown Menu
![](https://habrastorage.org/files/66c/4a2/c6a/66c4a2c6a99b4263af74087797f764fe.jpg)
Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi
Css3 only dropdown menu
![](https://habrastorage.org/files/4ed/68f/84a/4ed68f84af0c4658a6088e3b2ce7ffaf.jpg)
Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
http://codepen.io/riogrande/pen/ahBrb
Dropdown Menus
![](https://habrastorage.org/files/89a/27b/d33/89a27bd331d4477fb06fbbd695063eb2.jpg)
Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
http://codepen.io/kkrueger/pen/qfoLa
Pure CSS DropDown Menu
![](https://habrastorage.org/files/98d/141/0a3/98d1410a3ae840e7b1f68a309451d705.jpg)
Примитивное, но эффективное решение. Только css и html.
http://codepen.io/andornagy/pen/xhiJH
Pull Menu — Menu Interaction Concept
![](https://habrastorage.org/files/bef/efa/c10/befefac10a224b84a5d95d2a70d9b4e4.jpg)
Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
http://codepen.io/fbrz/pen/bNdMwZ
Make Simple Dropdown Menu
![](https://habrastorage.org/files/b7e/f34/91e/b7ef3491e44d44988aafe009b0b9a6cb.jpg)
Чистый и простой код, без js. В ie8 точно работать будет.
http://codepen.io/nyekrip/pen/pJoYgb
Pure CSS dropdown [work for mobile touch screen]
![](https://habrastorage.org/files/0ad/d90/6c5/0add906c566945cfb79c50c4886255f4.jpg)
Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
http://codepen.io/jonathlee/pen/mJMzgR
Dropdown Menu
![](https://habrastorage.org/files/a8d/237/c43/a8d237c431d74750837a0f0980c49c8d.jpg)
Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
http://codepen.io/MeredithU/pen/GAinq
CSS 3 Dropdown Menu
![](https://habrastorage.org/files/f0d/5c8/9e8/f0d5c89e88994270842402fd42749cca.jpg)
Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
http://codepen.io/ibeeback/pen/qdEZjR
KVdKQJ (автор очень долго думал над названием)
![](https://habrastorage.org/files/524/98b/7e3/52498b7e35af4638a20f18b514f2d02a.jpg)
Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ
CSS3 Menu Dropdowns (особенное решение)!
![](https://habrastorage.org/files/015/3c9/88e/0153c988e9ae444ba1ebed71d82795fd.jpg)
Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
http://codepen.io/cmcg/pen/ofFiz
П.С.
Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Комментарии (33)
Zenitchik
23.12.2015 22:03+3Я нуб в веб-дизайне, подобные подборки помогают мне ликвидировать безграмотность.
withkittens
23.12.2015 23:05+6Большинство таких вложенных свисто-перделочных меню раздражают тем, что они не работают без мыши: чтобы добраться до подменю, нужно тапнуть меню верхнего уровня. А в свою очередь тап воспринимается не как «покажи, что внутри», а как клик с последующим незапланированным переходом хрен знает куда.
xxxTy3uKxxx
24.12.2015 00:11+1К сожалению, это показывает уровень «грамотности» разработчика. Данная «фича» известна уже давно, а до сих пор находятся уникумы которые или вешают пустые якоря на ссылки или не делают event.preventDefault()
snikes
24.12.2015 09:56event.preventDefault() — больше не поддерживается FireFox — это устаревший метод
YNile
24.12.2015 11:57+1Такое безапеляционное заявление будет смотреться ещё увереннее с линкой на подтверждение данных слов
snikes
24.12.2015 12:38stackoverflow.com/questions/1367195/preventdefault-wont-work-on-firefox#1367195
javascript.ru/forum/misc/53193-utochneniya-po-event-preventdefault.html
bugs.jquery.com/ticket/13425
fox.htmlasks.com/e_preventdefault_behaviour_not_working_in_firefox
Куча обсуждений по данной проблеме, сам сталкивалсяYNile
24.12.2015 12:591 — событие передается в переменной id — использование неправильное.
2 — событие явно не передано вовсе
3 — тоже самое
4 — странный пример. Непонятно к чему там совсем preventDefault
Если передавать нормально событие — проблем нет.
«Сам сталкивался» :)
Stalker_RED
24.12.2015 19:14Узбагойтесь!
Всё в порядке с preventDefault, просто некоторые не умеют его готовить.
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
AndersonDunai
24.12.2015 01:03Похожее творится и с hover'ом на обычные блоки на странице. Кстати, пользователи redtube и xvideos с вами полностью согласны.
withkittens
24.12.2015 01:49+7Не поленился, потестировал эти красивые многоуровневые меню на девайсе без мыши.
1. Flat Horizontal Navigation — не работает.
2. Material Nav Header w/ Aligned Dropdowns — не работает.
3. Smooth Accordion Dropdown Menu — работает.
4. Pure CSS Dark Inline Navigation Menu — не работает.
5. Pure CSS3 Mega Dropdown Menu With Animation — не работает.
6. CSS3 Dropdown Menu — не работает.
7. Simple Pure CSS Dropdown Menu — не работает.
8. Bootstrap 3 mega-dropdown menu — работает.
9. Flat Navigation — не работает.
10. 3D nested navigation — не работает.
11. Responsive Mega Menu — Navigation — не работает.
12. Pure Css3 Menu — не работает.
13. Full CSS3 Dropdown Menu — работает.
14. Css3 only dropdown menu — не работает.
15. Dropdown Menus — не работает.
16. Pure CSS DropDown Menu — не работает.
17. Pull Menu — Menu Interaction Concept — на планшете не работает. мобильная версия на телефоне работает
18. Make Simple Dropdown Menu — не работает.
19. Pure CSS dropdown [work for mobile touch screen] — doesn't give a f*ck for tablet touch screen.
20. Dropdown Menu — не работает.
21. CSS 3 Dropdown Menu — не работает.
22. KVdKQJ (автор очень долго думал над названием) — не работает.
23. CSS3 Menu Dropdowns (особенное решение)! — не работает.
«Не работает» означает, что меню игнорировало тапы, либо тап приводил к переходу, либо с подменю было невозможно взаимодействовать (например, оно появлялось и мгновенно исчезало).
Делаю для себя вывод, что «pure css» с hover'ами — это скорее недостаток, чем достоинство.AndersonDunai
24.12.2015 02:22+1С помощью pure CSS можно сделать «stateful hover», например:
<div class="menu-item" tabindex="0"> <a href="#">Link</a> </a>
.button .menu-item { pointer-events: none; } .button:focus .menu-item { pointer-events: all; }
В таком случае переход произойдёт лишь при втором тапе.
P. S. Ну и, конечно, обернуть всё в media query.
Teadon
24.12.2015 19:32Спасибо, отлично протестировал!
Понятно, что «Pure css» с hover'ами подходит для ПК, а не для мобильных устройств. На них вообще механизм взаимодействия нужно другой применять. Но ведь то, что какой-то вариант не подходит для мобильного не говорит о том, что его нельзя использовать на ПК, просто надо сделать по другому.
Всему свое место.
Pilat
24.12.2015 00:39Мне понравилось Bootstrap 3 mega-dropdown menu. Но как сложно все эти ссылки вводить с телефона… QR код был бы очень уместен.
gmixo
24.12.2015 13:34Недавно понадобилось запилить двухуровневое меню, это когда две полосы с кнопками, содержимое нижней полосы зависит от верхней, интересно есть какие то готовые решения? Не нашёл ничего подходящего, руками допиливал меню jQuery UI
Stalker_RED
24.12.2015 19:26Это же частный случай табов, только вместо текста второй ряд кнопок.
http://jsfiddle.net/syahrasi/us8uc/gmixo
28.12.2015 08:25так и делал но были там какието сложности, кажется пришлось допиливать css ну и основная сложность была в переходе по урлу на нужную вкладку
Teadon
24.12.2015 19:42Такое не подходит? codepen.io/ojbravo/pen/tIacg
Второй уровень меню тоже в строчку.gmixo
28.12.2015 08:23да выглядит именно так, но вложенный уровень формируется динамически, спасибо за хороший пример, возьму на вооружение
alltiptop
Избавьте меня от всего этого «креатива»
Smi1e
Не перегибайте палку. В разумных приделах легкий и лаконичный дизайн не будет проблемой.
DenimTornado
А что из этого всего — «легкий и лаконичный»?
damat
вот 2 приятных варианта из подборки:
http://codepen.io/andytran/pen/YPvQQN
http://codepen.io/3lv3n_snip3r/pen/XbddOO
Не знаю, почему такие подборки вызывают негатив: максимально понятное название, которое полностью соответствуют действительности. Крайне полезны, когда тупишь на тему нового дизайна — придумывать все всегда с нуля занимает нереальное количество времени. А так потыкал в подборку, подогнал прямо в codepen под свои данные и понял, надо оно тебе или нет.
Автору большое спасибо!
DenimTornado
Ни первое, ни второе не работает на мобильном устройстве, а значит нужно для мобильного пилить своём меню или допиливать текущее. Ну и слишком много анимации даже здесь. Нафига во-втором меню эффект лазерного выстрела?..
damat
Если статья называется «Большой обзор красивых многоуровневых меню с codepen», почему в ней должны быть мобильные версии с минимум анимаций?..
DenimTornado
Потому что вэб становится сильно мобильным и решение нельзя взять «как есть», а если нельзя взять «как есть», то чем оно отличается от просто красивых картинок?
Teadon
Красивые меню с большим количеством анимации обычно применяются на ПК, а под мобильное устройство делают отдельное, упрощенное. Например выезжающая панель, как в нативном приложении с минимум анимации, чтобы не съедать весь процессор телефона. В таком варианте можно не грузить лишний код на мобильном, который применялся на ПК.
А вот когда стараются объединить два вида меню в одном месте, получается обычно коряво, это особенно ощущается в интернет-магазинах. Я открываю сайт на телефоне, хочу зайти в список категорий, а тут вываливается огромный список на весь экран и когда я его стараюсь просмотреть, скролится вся страница целиком (или список не поверх контента, а сдвигает информацию сайта на 300-1000 пикселей, превращая все в гигантскую распашонку). Тыкаю пальцем на элемент и у она либо вызывает hover, либо кидает на другую страницу (что я точно не ожидал), либо происходить все сразу вместе, либо ещё что-то непонятное. А все потому что поведение на нажатие по элементам меню на компе и на мобильных устройствах тоже разное. Нужно писать другой код реагирования. Hover уже срабатывает не так. По сути это два разных меню, с разной механикой и разным дизайном.
Поэтому то, что применима на ПК, часто не применима на мобильных устройствах.
Для телефона и планшета нужно использовать другое решение, которых кстати на Codepen тоже много. Можно объединять подходящие скрипты(для мобильного и для ПК) в один, допиливать под свою задачу и радоваться. Если бы сразу в решениях на Codepen запихали два варианта, то код был бы сложнее, а в некоторых случая и во все мог быть плохо отделен друг от друга и помешал бы объединению нескольких хороший идей в одну.
От красивых картинок решения отличаются как минимум тем, что не нужно все реализовывать с нуля. Гораздо быстрее и проще применить уже готовую анимацию, а не тратить на это время, особенно когда все достаточно понятно запрограммировано.
Также готовые варианты помогают придумать интересные решения.
В работе же это можно показывать дизайнерам и говорит, какие эффекты уже можно реализовать и как они могут выглядеть.
Mendel
Вам собственно о том и говорят — люди берут вот такие вот недоделанные «готовые решения», а потом «или переходит не туда» или «листается не то» и т.п.
Соглашусь с вами, что желательно делать разные версии для мобильного и для десктопного браузеров, чтобы не скрывать часть контента, а просто его не выводить, если он не будет использоваться, и не перегружать и так перегруженный мобильный канал.
Но практика такая не самая распространенная, и всё равно настоятельно рекомендуется, чтобы «полная» версия была хоть и менее удобной но работоспособной на мобильных устройствах.
Опять таки, трансформер с большим разрешением, у которого сняли или отвернули клавиатурный блок, и используют по планшетному, тыкая тачскрином это слать на полную версию или на мобильную? А проблемы с тапом остаются…
ПС: в любом случае мне менюхи понравились.
Teadon
не туда
Teadon
Приятно это слышать, значит не зря приготовил обзор!