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

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

От автора: приветствую вас, друзья. Мы продолжаем знакомиться с замечательными плагинами 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>

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

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

<link rel="stylesheet" href="css/jquery.slinky.css">
<script src="https://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();
});

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

#menu ul{
	padding: 0;
}

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

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree