В web-разработке всегда нужно использовать меню. Они могут быть короткими или длинными, располагаться вверху или сбоку, или в футере, но очень часто они бывают выпадающими. Как правило, для выпадающих, или dropdown, меню достаточно одного вложенного списка со ссылками. Реже они бывают многоуровневыми.
Давайте с вами посмотрим на примеры выпадающих меню, реализованные разными людьми на codepen.io. В каждом из них будет свой код со своими классами и стилями. Где-то вы увидите использование JavaScript или jQuery, где-то будет достаточно только CSS. Однако, прежде, чем вы будете анализировать код каждого конкретного примера, хотелось бы остановиться на общем принципе.
Выпадающие меню строятся на основе горизонтальных меню и вложенных списков. Обычно они основаны на том, что в один из элементов <li> вкладывают еще один список, например, <ul class="sub-menu"> со своим набором элементов <li>. Родительский <li> получает какой-нибудь класс, например dropdown или has-children, а также position: relative в качестве css-свойства . В свою очередь вложенный список <ul class="sub-menu"> получает css-свойства position: relative и display: none или visibility: hidden. Затем при наведении на элемент <li class="dropdown"> для .sub-menu изменяется свойство display на block или flex, а свойство visibility на visible. В последнем случае мы можем еще добавить какие-то эффекты с помощью свойства transition.
Примеры простых выпадающих меню
Ниже вы найдете пример того, как выпадающее меню формируется на основе изменения свойства display: none на display: blockпри наведении на <li>. Никакого изменения меню для мобильной версии здесь нет, но дальше будут и другие примеры.
See the Pen DropDown menu by Elen (@ambassador) on CodePen.
Еще один аналогичный вариант с маркировкой в виде плюса возле пунктов меню с раскрывающимся списком от Andor Nagy.
See the Pen Pure CSS DropDown Menu by Andor Nagy (@andornagy) on CodePen.
Еще один аналогичный вариант с маркировкой в виде стрелочки для выпадающего меню от Connor Brassington.
See the Pen Simple Pure CSS Dropdown Menu by Elen (@ambassador) on CodePen.
Выпадающее меню с анимацией на основе свойства visibility
See the Pen Dropdown menu with icons by Elen (@ambassador) on CodePen.
Выпадающее меню с анимацией от Andy Tran
See the Pen Flat Navigation by Andy Tran (@andytran) on CodePen.
Большое выпадающее меню с анимацией от Rian Ariona
See the Pen Stripe.com Style Dropdown Menu by Rian Ariona (@ariona) on CodePen.
Зигзагообразное выпадающее меню от Catalin Rosu
See the Pen Zigzag dropdown menu concept by Catalin Rosu (@catalinred) on CodePen.
Меню на основе jQuery от Andy Tran с єлементами, разворачивающимися по клику.
See the Pen Flat Horizontal Navigation by Andy Tran (@andytran) on CodePen.
Различные варианты анимации для выпадающего меню от Colin
See the Pen CSS3 Menu Dropdowns by Colin (@cmcg) on CodePen.
Выпадающие вертикальные меню
Выпадающее вертикальное меню на основе checkbox использует только CSS. В этом меню от Pedro Nauck <input type="checkbox"> нужен для переключения видимости выпадающих элементов.
See the Pen Only CSS3 Dropdown Menu by Pedro Nauck (@pedronauck) on CodePen.
Практически идентичное по внешнему виду меню от того же автора уже основано на использовании JS-кода, в котором в основном происходит изменение одних классов на другие.
See the Pen CSS3/Javascript Pure Dropdown Menu by Pedro Nauck (@pedronauck) on CodePen.
Меню с ссылками на социальные сети в виде аккордеона с анимацией появления и при наведении на ссылки. Автор Alvaro Montoro.
See the Pen Animated Navigation List by Alvaro Montoro (@alvaromontoro) on CodePen.
Вертикальное многоуровневое меню.
See the Pen Responsive Sticky Navigation Bar by Elen (@ambassador) on CodePen.
Боковое меню с выпадающими элементами на основе Semantic UI от İnvinciblecat
See the Pen Semantic ui Admin Layout - Sidebar + Navbar by İnvinciblecat (@telatkaya) on CodePen.
Еще один вариант такого же по принципу меню или аккордеона от fainder.
See the Pen Smooth Accordion Dropdown Menu by fainder (@fainder) on CodePen.
Как бы ни были интересны эти меню, у них у всех есть один недостаток - они не являются адаптивными, а это значит, что вам придется дописывать код самим при изменении разрешения экрана.
Примеры адаптивных выпадающих меню
Анимированное меню от Catalin Rosu
See the Pen CSS3 animated & responsive dropdown menu by Catalin Rosu (@catalinred) on CodePen.
Данное меню от Kevin D основано на HTML/CSS и jQuery. Оно изменяет свой внешний вид для мобильных устройств.
See the Pen Responsive Menu by Kevin D (@wrecklaimer) on CodePen.
Меню ниже предлагает вам способ создания выпадающего меню на HTML/CSS за счет управления label для <input type="checkbox">, расположенного ниже ссылки с выпадающим списком. Тут есть совсем немного кода на JS, который преобразует кнопку-гамбургер в крестик за счет смены класса.
See the Pen Responsive Dropdown Menu Bar by Elen (@ambassador) on CodePen.
Примерно такой же вариант меню на основе label и checkbox внутри элемента <li> со ссылкой от dautozy .
See the Pen Responsive Dropdown Menu Multi Level by dautozy (@dautoblog) on CodePen.
Тот же принцип положен в основу выпадающего CSS-меню от Sujoy Sarkar
See the Pen Pure CSS Responsive Dropdown Menu by Sujoy Sarkar (@theSujoySarkar) on CodePen.
А в этом меню от Kasper Plougmann мы уже видим не 2, а 3 уровня вложенности
See the Pen Pure CSS responsive dropdown menu - written in LESS by Kasper Plougmann (@Squazz) on CodePen.
3-хуровневое меню на основе jQuery от Alex Ageev
See the Pen Responsive Multilevel Menu by Alex Ageev (@alexageev) on CodePen.
3-хуровневое меню на основе CSS и JavaScript
See the Pen Multilevel Dropdown Menu by Elen (@ambassador) on CodePen.
Отзывчивое меню на CSS от Igor
See the Pen Responsive dropdown menu by Igor (@wired) on CodePen.
Пример мега-меню и обычного выпадающего меню, реализованного только с помощью HTML и CSS.
See the Pen Responsive Mega Menu and Dropdown Menu (CSS only) by Elen (@ambassador) on CodePen.
Отзывчивое меню на CSS с небольшим количеством JS-кода от Aleš
See the Pen Responsive dropdown menu by Aleš (@ales_codes) on CodePen.
Пример выпадающего меню вместе со страницей сайта от Ashley Ellis
See the Pen Untitled by Ashley Ellis (@swashpro) on CodePen.
Адаптивное выпадающее меню на основе CSS и JS от CodeSium
See the Pen Responsive Dropdown Menu by CodeSium (@CodeSium) on CodePen.
CSS + JS в выпадающем адаптивном меню от Ralfff
See the Pen friggin’ responsive dropdown menu by Ralfff (@Ralfff) on CodePen.
И еще один вариант от Bishwajit Debnath
See the Pen Responsive Dropdown Menu using HTML CSS & JavaScript by Bishwajit Debnath (@debnath-bishwajit) on CodePen.
Выпадающее меню с иконками в мобильной версии от Arby
See the Pen Open Props - Dropdown Menu & Infinite Scroll Animation by Arby (@mobalti) on CodePen.
Адаптивное выпадающее меню с иконками от Mohamed Yousef
See the Pen Responsive Dropdown Menu with icon by Mohamed Yousef (@a7rarpress) on CodePen.
Адаптивное меню с использованием jQuery от musa şahin. Сначала вам нужно подключить эту библиотеку.
See the Pen Responsive DropDown Menu|Jquery,CSS by musa şahin (@musahinist) on CodePen.
Выпадающее меню в виде вкладок, основано на jQuery
See the Pen Horizontal Dropdown Navigation by Elen (@ambassador) on CodePen.
Адаптивное меню на Vue.js от Raphaël
See the Pen VueJS Header responsive & Loader by Raphaël (@raphaelbensimon) on CodePen.
Выпадающие меню на основе Bootstrap
Поскольку Bootstrap изначально является фреймворком, который заточен под адаптивность, то и меню в нем тоже являются адаптивными.
Меню на основе Bootstrap-4 с переключателем со светлой на темную тему от Ivan Grozdic.
See the Pen Responsive Bootstrap 4 menu - light/dark by Ivan Grozdic (@ig_design) on CodePen.
Несколько вариантов меню Bootstrap-4 от MDBootstrap
See the Pen Bootstrap Navbar - Material Design & Bootstrap 4 by MDBootstrap (@mdbootstrap) on CodePen.
