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

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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree