В 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.0

Еще один аналогичный вариант с маркировкой в виде плюса возле пунктов меню с раскрывающимся списком от Andor Nagy.

See the Pen Pure CSS DropDown Menu by Andor Nagy (@andornagy) on CodePen.0

Еще один аналогичный вариант с маркировкой в виде стрелочки для выпадающего меню от Connor Brassington.

See the Pen Simple Pure CSS Dropdown Menu by Elen (@ambassador) on CodePen.0

Выпадающее меню с анимацией на основе свойства visibility

See the Pen Dropdown menu with icons by Elen (@ambassador) on CodePen.0

Выпадающее меню с анимацией от Andy Tran

See the Pen Flat Navigation by Andy Tran (@andytran) on CodePen.0

Большое выпадающее меню с анимацией от Rian Ariona

See the Pen Stripe.com Style Dropdown Menu by Rian Ariona (@ariona) on CodePen.0

Зигзагообразное выпадающее меню от Catalin Rosu

See the Pen Zigzag dropdown menu concept by Catalin Rosu (@catalinred) on CodePen.0

Меню на основе jQuery от Andy Tran с єлементами, разворачивающимися по клику.

See the Pen Flat Horizontal Navigation by Andy Tran (@andytran) on CodePen.0

Различные варианты анимации для выпадающего меню от Colin

See the Pen CSS3 Menu Dropdowns by Colin (@cmcg)
on CodePen.0

Выпадающее вертикальное меню на основе checkbox использует только CSS. В этом меню от Pedro Nauck <input type="checkbox"> нужен для переключения видимости выпадающих элементов.

See the Pen Only CSS3 Dropdown Menu by Pedro Nauck (@pedronauck) on CodePen.0

Практически идентичное по внешнему виду меню от того же автора уже основано на использовании JS-кода, в котором в основном происходит изменение одних классов на другие.

See the Pen
CSS3/Javascript Pure Dropdown Menu
by Pedro Nauck (@pedronauck)
on CodePen.0

Вертикальное многоуровневое меню.

See the Pen Responsive Sticky Navigation Bar by Elen (@ambassador) on CodePen.0

Боковое меню с выпадающими элементами на основе Semantic UI от İnvinciblecat

See the Pen Semantic ui Admin Layout - Sidebar + Navbar by İnvinciblecat (@telatkaya) on CodePen.0

Еще один вариант такого же по принципу меню или аккордеона от fainder.

See the Pen Smooth Accordion Dropdown Menu by fainder (@fainder) on CodePen.0

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

Анимированное меню от Catalin Rosu

See the Pen CSS3 animated & responsive dropdown menu by Catalin Rosu (@catalinred) on CodePen.0

Данное меню от Kevin D основано на HTML/CSS и jQuery. Оно изменяет свой внешний вид для мобильных устройств.

See the Pen Responsive Menu by Kevin D (@wrecklaimer) on CodePen.0

Меню ниже предлагает вам способ создания выпадающего меню на HTML/CSS за счет управления label для <input type="checkbox">, расположенного ниже ссылки с выпадающим списком. Тут есть совсем  немного кода на JS, который преобразует кнопку-гамбургер в крестик за счет смены класса.

See the Pen Responsive Dropdown Menu Bar by Elen (@ambassador) on CodePen.0

Примерно такой же вариант меню на основе label и checkbox внутри элемента <li> со ссылкой от dautozy .

See the Pen Responsive Dropdown Menu Multi Level by dautozy (@dautoblog) on CodePen.0

Тот же принцип положен в основу выпадающего CSS-меню от Sujoy Sarkar

See the Pen Pure CSS Responsive Dropdown Menu by Sujoy Sarkar (@theSujoySarkar) on CodePen.0

А в этом меню от Kasper Plougmann мы уже видим не 2, а 3 уровня вложенности

See the Pen Pure CSS responsive dropdown menu - written in LESS by Kasper Plougmann (@Squazz) on CodePen.0

3-хуровневое меню на основе jQuery от Alex Ageev

See the Pen Responsive Multilevel Menu by Alex Ageev (@alexageev) on CodePen.0

3-хуровневое меню на основе CSS и JavaScript

See the Pen Multilevel Dropdown Menu by Elen (@ambassador) on CodePen.0

Отзывчивое меню на CSS от Igor

See the Pen Responsive dropdown menu by Igor (@wired) on CodePen.0

Пример мега-меню и обычного выпадающего меню, реализованного только с помощью HTML и CSS.

See the Pen Responsive Mega Menu and Dropdown Menu (CSS only) by Elen (@ambassador) on CodePen.0

Отзывчивое меню на CSS с небольшим количеством JS-кода от  Aleš

See the Pen Responsive dropdown menu by Aleš (@ales_codes) on CodePen.0

Пример выпадающего меню вместе со страницей сайта от Ashley Ellis

See the Pen Untitled by Ashley Ellis (@swashpro) on CodePen.0

Адаптивное выпадающее меню на основе CSS и JS от CodeSium 

See the Pen Responsive Dropdown Menu by CodeSium (@CodeSium) on CodePen.0

CSS + JS в выпадающем адаптивном меню от Ralfff 

See the Pen friggin’ responsive dropdown menu by Ralfff (@Ralfff) on CodePen.0

И еще один вариант от Bishwajit Debnath

See the Pen Responsive Dropdown Menu using HTML CSS & JavaScript by Bishwajit Debnath (@debnath-bishwajit) on CodePen.0

Выпадающее меню с иконками в мобильной версии от  Arby 

See the Pen Open Props - Dropdown Menu & Infinite Scroll Animation by Arby (@mobalti) on CodePen.0

Адаптивное выпадающее меню с иконками от Mohamed Yousef 

See the Pen Responsive Dropdown Menu with icon by Mohamed Yousef (@a7rarpress) on CodePen.0

Адаптивное меню с использованием jQuery от musa şahin. Сначала вам нужно подключить эту библиотеку.

See the Pen Responsive DropDown Menu|Jquery,CSS by musa şahin (@musahinist) on CodePen.0

Выпадающее меню в виде вкладок, основано на jQuery

See the Pen Horizontal Dropdown Navigation by Elen (@ambassador) on CodePen.0

Адаптивное меню на Vue.js от Raphaël

See the Pen VueJS Header responsive & Loader by Raphaël (@raphaelbensimon) on CodePen.0

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

Меню на основе Bootstrap-4 с переключателем со светлой на темную тему от Ivan Grozdic.

See the Pen
Responsive Bootstrap 4 menu - light/dark
by Ivan Grozdic (@ig_design)
on CodePen.0

Несколько вариантов меню Bootstrap-4 от MDBootstrap

See the Pen Bootstrap Navbar - Material Design & Bootstrap 4 by MDBootstrap (@mdbootstrap) on CodePen.0

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *