Главная страница » jQuery » Боковое многоуровневое мобильное меню

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

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

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

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

Шаг 1. HTML

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

<a href="#" target="_blank">Криптовалюта</a>

<ul>

<li><a href="#">Bitcoin</a></li>

<li><a href="#">Ethereum</a></li>

</ul>

</li>

</ul>

<a>Девайсы</a>

<ul>

<a href="#">Мобильные телефоны</a>

<ul>

<li><a href="#">Смартфоны</a></li>

<li><a href="#">Планшеты</a></li>

</ul>

</li>

<a href="#">Телевизоры</a>

<ul>

<li><a href="#">Супер LED</a></li>

</ul>

</li>

<a href="#">Камеры</a>

<ul>

<li><a href="#">Профессиональные</a></li>

<li><a href="#">Маленькие</a></li>

</ul>

</li>

</ul>

</li>

<a href="#">Издания</a>

<ul>

<li><a href="#">National Geographic</a></li>

<li><a href="#">Scientific American</a></li>

<li><a href="#">The Spectator</a></li>

</ul>

</li>

<a href="#">Магазины</a>

<ul>

<li>

<a href="#">Одежды</a>

<ul>

<li>

<a href="#">Женская одежда</a>

<ul>

</ul>

</li>

<li>

<a href="#">Мужская одежда</a>

<ul>

<li><a href="#">Рубашки</a></li>

</ul>

</li>

</ul>

</li>

<li>

<a href="#">Украшения</a>

</li>

<li>

<a href="#">Музыка</a>

</li>

<li>

<a href="#">Бакалия</a>

</li>

</ul>

</li>

<li class="collections"><a href="#">Коллекции</a></li>

<li class="credits"><a href="#">Кредиты</a></li>

</ul>

</nav>

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

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

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

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

1	$('#main-nav').hcMobileNav();

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

$('#main-nav').hcMobileNav({

maxWidth: 1024

});

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

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

$('#main-nav').hcMobileNav({

insertClose: true,

insertBack: true,

labelClose: 'Close',

labelBack: 'Back'

});

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

$('#main-nav').hcMobileNav({

pushContent: true // по умолчанию false

});

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

$('#main-nav').hcMobileNav({

side: 'left'

});

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

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

// перекрытие / развернуть / нет

levelOpen: 'overlap',

// в пикселях

levelSpacing: 40,

// показывает заголовки подменю,

levelTitles: ложные,

// название первого уровня

navTitle: нуль,

// extra CSS класс (ы)

navClass:",

// отключить прокрутку тела

disableBody: true,

// закрыть навигацию по щелчку мыши

closeOnClick: true,

// пользовательский элемент переключения

customToggle: null

});

Заключение.

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