Ваша корзина пуста
Форма входа

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

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

Плагин для обрезки длинного горизонтального списка меню по ширине экрана - cut-list.js

Дата добавления: 30.12.2020 - 19:43
Добавил: Buger
Количество просмотров: 222
Количество комментариев: 0
Размер файла: 4.7 Kb
Рейтинг материала: 0.0 / 0
Плагин для обрезки длинного горизонтального списка меню по ширине экрана - cut-list.js
рейтинг 0.0
/
голосов 0
cut-list.js - это крошечный и простой в использовании отзывчивый список, который усекает ваш длинный горизонтальный список и сворачивает элементы списка, которые не помещаются в одну строку в раскрывающемся списке при изменении размера окна.

Хорошо подходит для гибкой навигации по сайту, которая гарантирует, что все элементы меню находятся в одной строке на всех устройствах, и позволяет посетителю открывать скрытые элементы меню, щелкая, касаясь или наведя курсор на кнопку «Еще».

Как использовать:


1. Загрузите в документ таблицу стилей jquery.cut-list.css и JavaScript jquery.cut-list.js.
Код
<link rel="stylesheet" href="/path/to/jquery.cut-list.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.cut-list.js"></script>


2. Вызовите функцию из своего длинного списка и готово.
Код
<ul class="cut-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  ....
</ul>

Код
$(".cut-list").cutList({
  // options here
});


3. Настройте текст для кнопки «Еще». По умолчанию: «More».
Код
$(".cut-list").cutList({
  moreBtnTitle: '<i class="fas fa-angle-down"></i> More</div>'
});


4. Определите, показывать ли скрытые элементы списка при наведении курсора. По умолчанию: false.
Код
$(".cut-list").cutList({
  showMoreOnHover: true
});


5. Сделайте элемент всегда видимым на экране, то есть этот пункт меню не сворачивается в раскрывающийся список при изменении размера окна. По умолчанию: не определено.
Код
<ul class="cut-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li class="active">Item 4</li>
  <li>Item 5</li>
  ....
</ul>

Код
$(".cut-list").cutList({
  alwaysVisibleElem: '.active'
});


6. Определите задержку изменения размера в миллисекундах. По умолчанию: 50 мс.
Код
$(".cut-list").cutList({
  risezeDelay: 30
});
Добавлять комментарии могут только зарегистрированные пользователи.


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