Форма входа

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

    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

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

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

    Дата добавления: 23.01.2021 - 19:02
    Добавил: Buger
    Количество просмотров: 882
    Количество комментариев: 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: 'Связаться с нами',
    });
    Добавлять комментарии могут только зарегистрированные пользователи.


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