Выпадающее меню на CSS

Опубликовал: 3 месяца назад Общая рубрика

Меню на сайтах имеют очень важное значение. Поэтому сегодня мы с вами рассмотрим отзывчивое и легкое в настройке выпадающее меню. Готовы? Приступаем в полной версии статьи.

Выпадающее меню: Легко настраиваемое и отзывчивое

Поддерживается браузерами:

выпадающее меню

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

К примеру, Amazon: бесконечные категории, каждая категория со своими собственными подкатегориями, у которых есть что? Правильно, свои подкатегории. Вот почему в настоящее время, они прибегли к мега выпадающему меню в верхнем левом углу страницы.

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

выпадающее меню

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

Если вы не согласны, можете смело переделать под себя.

Иконки: Nucleo Library

Создание структуры

HTML выпадающее меню, представляет из себя — 2 элемента, <strong><header></strong> содержащий элемент выпадающего меню (<strong>.cd-dropdown-wrapper</strong>) и <strong><main></strong> для основного содержания <strong>.cd-dropdown-wrapper </strong>содержит в себе <strong>.cd-dropdown-trigger</strong> для вызова выпадающего меню и <strong>.cd-dropdown</strong>, который состоит из вложенных неупорядоченных списков (<strong><li></strong>).

 

Добавляем стиль

Примечание. Если вы хотите открыть раскрывающийся список слева, добавьте класс .open-left в элемент .cd-dropdown-wrapper.

 


Новая система комментариев
comments powered by HyperComments