Создание многоуровневого адаптивного меню на JQuery

На каждом хорошем сайте должно быть отличное меню. При создании данного элемента нужно применять особый подход и много усилий. Кроме хорошей визуальной составляющей должна быть правильная навигация. Хорошая навигация позволяет пользователю легко ориентироваться

Меню навигации нужно делать так, чтобы пользователь мог с легкостью найти любую информацию. Кроме того, нельзя забывать об адаптивности под мобильные устройства. В этом нам поможет плагин JQuery. Помните, хороший подход при создании позволит привлечь много клиентов.

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

HTML-код адаптивного меню

В начале, обязательно, подключите библиотеку JQuery и JavaScript документы на вашей HTML странице

Основой для меню послужит список ul. Наше меню имеет много уровней, а значит необходимо создавать многоуровневый список. Он будет состоять из 3-х уровней и иметь следующие ссылки: интересные, уроки, исходники, демонстрации, интересные новости. При наведении будет открываться следующий уровень меню и в нем будут подссылки. Например: ссылка — Уроки, подссылка — дизайна, пособие, инструкции.

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

Чтобы создать основу меню введите следующий код в HTML-документ:

Если открыть документ в браузере, вы увидите лишь многоуровневый список, но сейчас мы это исправим.

CSS-стили адаптивного меню

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

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

1. <AlignRight> — располагает основной элемент в правой части экрана.
2. <Selected> — Задает элементу свойство selected. Это автоматически применяется к его родительским элементам.
3. <SubmenuAlignRight> — располагает подменю в правой части. Подменю будет расположено не относительно всей страницы, а относительно размеров основного блока меню.
4. <SubmenuFullwidth> — подменю располагается по всей ширине меню.
5. <SubmenuMega> — создание мега-меню из подменю.
6. <SubmenuTabs> — создание меню вкладок из подменю.

Эти классы необходимо вписывать, чтобы к ним автоматически применялись стили исходного css файла. При желании, вы можете поработать над ним и изменить стили, но предварительно изучите его.

JavaScript код адаптивного меню

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

Список опций, которые применяются к меню:

1. {menu.logo} — задает стиль логотипа в меню(при наличии);
2. {menu.border} — создает нижнюю границу;
3. {menu.align} — выравнивание внутренних элементов по центру, ширине, левому и правому краю;
4. {item.subindicator} — создание индикатора для основных элементов;
5. {item.border} — Нижняя граница основных элементов при наведении;
6. {item.bg} — Смена фона основных элементов при наведении;
7. {submenu} — нужно задавать для подменю;
8. {submenu.border} — подменю имеет верхнюю границу;
9. {submenu.arrow} — стрелка с указателем на главный элемент;
10. {submenu.shadow} — создание тени подменю;
11. {subitem.bg} — смена фона для подэлементов onHover;
12. {subitem.border} — граница между подчастями меню;

Теперь наше меню выглядит так:

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

Теги: