Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

SnazzyMenu.js - легкий, настраиваемый плагин меню

Дата добавления: 23.01.2021 - 19:02
Добавил: Buger
Количество просмотров: 65
Количество комментариев: 0
Размер файла: 123.0 Kb
Рейтинг материала: 0.0 / 0
SnazzyMenu.js - легкий, настраиваемый плагин меню
БЕСПЛАТНО
рейтинг 0.0
/
голосов 0
SnazzyMenu.js - это легкий, но настраиваемый плагин jQuery, который упрощает создание гибкого, липкого, многоуровневого мегаменю для навигации по сайту.

Он автоматически преобразует выпадающее мега-меню в гамбургер-навигацию на мобильных или планшетных устройствах.

Демонстрация плагина находится в архиве (index.html)

Как использовать плагин SnazzyMenu.js:


1. Для начала подключите на свою страницу библиотеку jQuery и файлы плагина SnazzyMenu.js.
Код
<link rel="stylesheet" href="/path/to/css/snazzymenu.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/snazzymenu.js"></script>

2. Создайте раскрывающееся меню с несколькими столбцами для мегаменю, используя вложенные списки HTML следующим образом:
Код
<nav>
  <div class="snazzymenu">
  <ul id="menu-main-nav" class="menu">
  <li id="" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">
  <a href="#">Nav Item 1</a>
  <ul class="sub-menu">
  <li id="" class="menu-item menu-item-type-post_type menu-item-object-page">
  <a href="#">Menu 1-1</a>
  </li>
  <li id="" class="menu-item menu-item-type-post_type menu-item-object-page">
  <a href="#">Menu 1-2</a>
  </li>
  <li id="" class="menu-item menu-item-type-post_type menu-item-object-page">
  <a href="#">Menu 1-3</a>
  </li>
  <li id="" class="menu-item menu-item-type-post_type menu-item-object-page">
  <a href="#">Menu 1-4</a>
  </li>
  </ul>
  </li>
  <li id="" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">
  <a href="#">Nav Item 2</a>
  <ul class="sub-menu">
  <li id="" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">
  <a href="#">Menu 2-1</a>
  <ul class="sub-menu">
  <li id="" class="menu-item menu-item-type-post_type menu-item-object-page">
  <a href="#">Menu 2-1-1</a>
  </li>
  <li id="" class="menu-item menu-item-type-post_type menu-item-object-page">
  <a href="#">Menu 2-1-2</a></li>
  <li id="menu-item-147" class="menu-item menu-item-type-post_type menu-item-object-page">
  <a href="#">Menu 2-1-3</a></li>
  </ul>
  </li>
  <li id="" class="menu-item menu-item-type-post_type menu-item-object-page">
  <a href="#">Menu 2-2</a>
  </li>
  </ul>
  </li>
  </ul>
  </div>
</nav>

3. Вызовите плагин в верхнем контейнере и готово.
Код
jQuery('.snazzymenu').snazzyMenu({
  // здесь опции плагина
});

4. Добавьте уникальные имена классов к каждому элементу списка (столбцу) в мегаменю, а затем вы можете добавлять пользовательские элементы к этим элементам меню.
Код
jQuery('.snazzymenu').snazzyMenu({
  colClasses: true
});

Код
jQuery('.column-1').prepend('<img src="1.jpg">');
jQuery('.column-2').prepend('<img src="2.jpg">');
jQuery('.column-3').prepend('<img src="3.jpg">');

5. Определите, в какой точке мегаменю должно стать мобильным. По умолчанию: 1024.
Код
jQuery('.snazzymenu').snazzyMenu({
  breakpoint: 768
});

6. Определите положение навигации мобильного гамбургера. По умолчанию: «слева».
Код
jQuery('.snazzymenu').snazzyMenu({
  position: 'right' // или 'top'
});

7. Определите, нужно ли закреплять мегаменю вверху при прокрутке. По умолчанию: true.
Код
jQuery('.snazzymenu').snazzyMenu({
  sticky: true
});

8. Настройте иконку «Home» (логотип).
Код
jQuery('.snazzymenu').snazzyMenu({
  homeImage: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 13v10h-6v-6h-6v6h-6v-10h-3l12-12 12 12h-3zm-1-5.907v-5.093h-3v2.093l3 3z"/></svg>'
});

9. Настройте кнопку «Местоположение».
Код
jQuery('.snazzymenu').snazzyMenu({
  locationBtn: 'http://art-ucoz.ru',
  locationLabel: '8929 S Sepulveda, Ste 400 Los Angeles, CA 90045',
});

10. Настройте кнопку телефона.
Код
jQuery('.snazzymenu').snazzyMenu({
  phoneBtn: '123-456-7890',
  phoneLabel: 'Связаться с нами',
});
Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: