Slinky — адаптивное многоуровневое меню

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

HTML

Пример разметки

<div class="js-menu">
  <ul>
    <li><a href="#">Каталог</a></li>
    <li>
      <a href="#">Товары для животных</a>
      <ul>
        <li>
          <a href="#">Для кошек</a>
          <ul>
            <li><a href="#">Влажный корм</a></li>
            <li><a href="#">Сухой корм</a></li>
            <li><a href="#">Корм в больших упаковках</a></li>
            <li><a href="#">Лакомства</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS

Стили плагина

<link rel="stylesheet" type="text/css" href="css/slinky.min.css">

В файле demo.css нашей демки были переопределены некоторые стили, для придания более стильного вида меню.

JS

Для работы плагина требуется библиотека jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/slinky.min.js"></script>

Инициализация плагина

<script>
  var slinky = $('.js-menu').slinky({
    title: true
  });
</script>

Опции

• resize: true — Изменение размера высоты меню в соответствии с его пунктами навигации
• speed: 300 — Скорость анимации в мс
• theme: slinky-theme-default — Класс темы оформления Slinky
• title: false — Показывать заголовок под меню

API

.home(animate)

Переход назад в корневое меню
animate, значение по умолчанию true, передать false для пропуска анимации

.jump(target, animate)

Переход в подменю
target — селектор таргета для ul для перехода
animate, значение по умолчанию true, передать false для пропуска анимации

.destroy()

Удалить slinky

Примечание

Установите класс .active у UL для перехода туда при инициализации плагина