Меню сайта это несомненно один из самых важных элементов который стоит разрабатывать с особым усилием, правильный подход к навигации поможет посетителю найти нужную информацию, а вам привлечь еще клиентов на свой ресурс. Сегодня я вам расскажу как создать замечательное адаптивное, многоуровневое мега меню при помощи небольшого плагина jQuery, dmenu-это плагин jQuery для создания отзывчивого, многоуровневого и многостолбцового мега-меню, которое скрывает переполненные элементы навигации в вертикальном раскрывающемся списке с переключателем.

 

Если вы хотите скачать шаблон с уже готовой продуманной навигацией, тогда обратите внимание на предложения наших партнеров, там есть бесплатные шаблоны так и премиум с круглосуточной техподдержкой:

У нас будут семь различных примера навигации, кроме этого будет переключатель вида, он расположен внизу планшета, нажав на него вы измените размер и положение окна.

Шаг 1. HTML

Для начала работы включите необходимую библиотеку jQuery и JavaScript файлы плагинов меню в странице где будет находиться навигация:

Мега-меню будет состоять из следующей структуры для навигации:

Для каждой навигации разметка будет немного отличаться, но не существенно, более детально просмотреть можете в исходниках.

Шаг 2. CSS

Стили для каждой навигации по своему уникальны, по этому приведем пример базовых классов, которые вы можете использовать для навигации:

  • Selected: Делает элемент (и все родительские элементы) «Selected».
  • AlignRight: Выравнивание основного элемента по правому краю.
  • IconHidden: Использует значок в качестве запасного варианта, когда меню слишком большое.
  • SubmenuAlignRight: Выравнивание подменю. Примечание: подменю автоматически выравниваются по размеру окна просмотра.
  • SubmenuFullwidth: Позволяет заполнить подменю по всей ширине меню.
  • SubmenuMega: Превращает подменю в мега-меню.
  • SubmenuTabs: Превращает подменю в меню вкладок.
  • SubmenuAlignRight: Выравнивание подменю. Примечание: субподменю выравниваются автоматически.

Шаг 3. JS

Нам необходимо инициализировать плагин, при этом стоит понимать, что для инициализации конкретного меню, вам потребуются соответствующие опции, вот некоторые из них:

  • menu.align: Выравнивает основные элементы по левому краю, по правому краю, по центру или по ширине.
  • menu.border: Добавляет границу (внизу) в нижней части меню.
  • menu.logo: Стиль логотипа в меню (если есть).
  • item.bg: Добавляет фон к основным элементам при наведении.
  • item.border: Добавляет границу (снизу) к основным элементам при наведении.
  • item.subindicator: Добавляет индикатор к основным элементам.
  • submenu: Требуется для подменю.
  • submenu.arrow: Добавляет стрелку, указывающую на главный элемент.
  • submenu.border: Добавляет границу (сверху) к подменю.
  • submenu.shadow: Добавляет тень к подменю.
  • subitem.bg: Добавляет фон к подэлементам onHover.
  • subitem.border: Добавляет границу между подэлементами.

Думаю из семи вариантов, каждый найдет что-то для себя, а вы как считаете? оставляйте комментарии с вашими вопросами и пожеланиями.

Вот и все. Готово!