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

HC MobileNav выдвигается из левой или правой части веб-страницы при переключении и перекрывает (или расширяет) подменю при открытии родительского меню.

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

Боковое многоуровневое мобильное меню. Как реализовать и использовать:

Шаг 1. HTML

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

Боковое многоуровневое мобильное меню

Шаг 2. Подключение плагинов.

Загрузите последнюю версию библиотеки jQuery и файлы плагина jQuery HC-MobileNav в вашу страницу:

Инициализируйте плагин jQuery HC-MobileNav и готово:

Укажите ширину экрана, при которой breakppint плагин скрывает обычную навигацию:

Шаг 3. Настройка плагина меню.

Настройте текст для меток закрытия и возврата:

Когда HC MobileNav переключен, выдвиньте основное содержание к другой стороне:

Задаем направление для HC MobileNav. По умолчанию: left:

Дополнительные параметры настройки для HC MobileNav:

$(‘#main-nav’).hcMobileNav({

Заключение.

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

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