Топ плагинов jQuery. Плагин меню Slinky

Дата публикации: 2017-01-24

От автора: приветствую вас, друзья. Мы продолжаем знакомиться с замечательными плагинами jQuery, позволяющими решить большой круг различных задач. В этой статье мы познакомимся с плагином Slinky, который позволяет реализовать на сайте оригинальное меню в виде слайдера.

Меню — это один из ключевых элементов любого сайта. Оригинально и красиво сделанное меню является изюминкой многих сайтов и, порой, может нивелировать какие-либо недостатки сайта, которые можно простить, наслаждаясь работой меню.

Сегодня перед нами один из jQuery плагинов, который может добавить такую изюминку к вашему меню — это плагин Slinky, который делает из меню что-то вроде слайдера. По указанной ссылке можно ознакомиться с коротенькой документацией. Скачать же плагин можно с сайта GitHub.

Верстка меню вполне классическая:

<div id="menu">
	<ul>
		<li><a href="#">Пункт 1</a></li>
		<li><a href="#">Пункт 2</a></li>
		<li><a href="#">Пункт 3</a>
			<ul>
				<li><a href="#">Пункт 3.1</a>
					<ul>
						<li><a href="#">Пункт 3.1.1</a>
						<li><a href="#">Пункт 3.1.2</a>
						<li><a href="#">Пункт 3.1.3</a>
					</ul>
				</li>
				<li><a href="#">Пункт 3.2</a></li>
				<li><a href="#">Пункт 3.3</a></li>
			</ul>
		</li>
		<li><a href="#">Пункт 4</a></li>
		<li><a href="#">Пункт 5</a></li>
	</ul>
</div>

<ul>

<li><a href="#">Пункт 1</a></li>

<li><a href="#">Пункт 2</a></li>

<li><a href="#">Пункт 3</a>

<ul>

<li><a href="#">Пункт 3.1</a>

<ul>

<li><a href="#">Пункт 3.1.1</a>

<li><a href="#">Пункт 3.1.2</a>

<li><a href="#">Пункт 3.1.3</a>

</ul>

</li>

<li><a href="#">Пункт 3.2</a></li>

<li><a href="#">Пункт 3.3</a></li>

</ul>

</li>

<li><a href="#">Пункт 4</a></li>

<li><a href="#">Пункт 5</a></li>

</ul>

</div>

Топ плагинов jQuery. Плагин меню Slinky

Пока что перед нами неоформленное меню, сверстанное стандартно, с помощью списков. Теперь подключим файлы плагина:

<link rel="stylesheet" href="css/jquery.slinky.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.slinky.js"></script>

И инициализируем плагин Slinky, обратившись к методу slinky:

$(function() {
	$('#menu').slinky();
});

$(function() {

$('#menu').slinky();

});

Также обнулим внутренние отступы для списка, чтобы пункты меню красиво прилегали к левому краю списка:

#menu ul{
	padding: 0;
}

#menu ul{

padding: 0;

}

Если все сделано правильно, тогда наше меню готово и мы можем обращаться к вложенным пунктам с оригинальным эффектом слайдинга.

Топ плагинов jQuery. Плагин меню Slinky

Как видим, всего несколько минут и мы получили действительно оригинальное решение меню для вашего сайта. На этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

Метки: jquery