![](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 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.
Only registered users can participate in poll. Log in, please.
Вам интересны такие подборки по разным тематикам? (кнопки, вкладки, подсказки и так далее)
92.82% Да504
7.18% Нет39
543 users voted. 61 users abstained.