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

 

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

Как использовать:

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

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

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

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

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

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

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

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

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

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

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