Боковое многоуровневое мобильное меню
Недавно мы писали о том, как мы относимся к гамбургер меню, но не смотря на это дизайнеры и разработчики все активней его используют, к сожалению, хоть этот тренд отходит и всех уже немного достал, но не стоит забывать о людях которым нравится и они желают видеть такое меню на своем сайте. Сегодня мы хотим рассказать, как создать боковое многоуровневое меню при помощи плагина jQuery. HC MobileNav-это плагин jQuery для создания многоуровневой, мобильной, боковой навигации вне видимой области, которая поддерживает бесконечное вложение элементов.
HC MobileNav выдвигается из левой или правой части веб-страницы при переключении и перекрывает (или расширяет) подменю при открытии родительского меню. Если вы хотите использовать уже готовые меню реализованные в красивых шаблонах, тогда обратите внимание на предложение от наших партнеров, там вы найдете много интересного:
Как использовать:
Создаем разметку многоуровневого меню из вложенного списка навигации, который будет выглядеть следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<nav id="main-nav"> <ul class="first-nav"> <li class="cryptocurrency"> <a href="#" target="_blank">Криптовалюта</a> <ul> <li><a href="#">Bitcoin</a></li> <li><a href="#">Ethereum</a></li> </ul> </li> </ul> <ul class="second-nav"> <li class="devices"> <a>Девайсы</a> <ul> <li class="mobile"> <a href="#">Мобильные телефоны</a> <ul> <li><a href="#">Смартфоны</a></li> <li><a href="#">Планшеты</a></li> </ul> </li> <li class="television"> <a href="#">Телевизоры</a> <ul> <li><a href="#">Для дома</a></li> <li><a href="#">Супер LED</a></li> </ul> </li> <li class="camera"> <a href="#">Камеры</a> <ul> <li><a href="#">Профессиональные</a></li> <li><a href="#">Маленькие</a></li> </ul> </li> </ul> </li> <li class="magazines"> <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> <li class="store"> <a href="#">Магазины</a> <ul> <li> <a href="#">Одежды</a> <ul> <li> <a href="#">Женская одежда</a> <ul> <li><a href="#">Топы</a></li> </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> |
Загрузите последнюю версию библиотеки jQuery и файлы плагина jQuery HC-MobileNav в вашу страницу:
1 2 3 |
<link href="hc-mobile-nav.css" rel="stylesheet"> <script src="/jquery-3.3.1.slim.min.js" ></script> <script src="hc-mobile-nav.js"></script> |
Инициализируйте плагин jQuery HC-MobileNav и готово:
1 |
$('#main-nav').hcMobileNav(); |
Укажите ширину экрана, при которой breakppint плагин скрывает обычную навигацию:
1 2 3 |
$('#main-nav').hcMobileNav({ maxWidth: 1024 }); |
Настройте текст для меток закрытия и возврата:
1 2 3 4 5 6 |
$('#main-nav').hcMobileNav({ insertClose: true, insertBack: true, labelClose: 'Close', labelBack: 'Back' }); |
Когда HC MobileNav переключен, выдвиньте основное содержание к другой стороне:
1 2 3 |
$('#main-nav').hcMobileNav({ pushContent: true // по умолчанию false }); |
Задаем направление для HC MobileNav. По умолчанию: left:
1 2 3 |
$('#main-nav').hcMobileNav({ side: 'left' }); |
Дополнительные параметры настройки для HC MobileNav:
$(‘#main-nav’).hcMobileNav({
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// перекрытие / развернуть / нет levelOpen: 'overlap', // в пикселях levelSpacing: 40, // показывает заголовки подменю, levelTitles: ложные, // название первого уровня navTitle: нуль, // extra CSS класс (ы) navClass:", // отключить прокрутку тела disableBody: true, // закрыть навигацию по щелчку мыши closeOnClick: true, // пользовательский элемент переключения customToggle: null }); |
В результате у нас есть замечательное многоуровневое меню с поддержкой мобильных устройств. Материал взят из зарубежного источника и переведен нашей командой для ознакомительных целей.
Вот и все. Готово!
Опубликовал Cooper 31.08.2018 в 09:25, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |