Подборка горизонтальных меню на jQuery

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

Выбор редакции: Mega Menu Reloaded

Mega Menu Reloaded предлагает множество опций для создания комплексных современных меню навигации. Плагин работает без использования Javascript, и даже при отключении поддержки этой технологии меню будет отлично смотреться практически в любом браузере. За сравнительно небольшие вы получите функциональное меню навигации без необходимости связываться с написанием кода:

menu-bar-premium

Полноценное решение для создания отличных меню навигации

1. jMenu

jquery-css-navigation

jQuery-плагин, который позволяет создавать красивое горизонтальное меню для сайта с неограниченным количеством подменю. Кроме самой библиотеки jQuery вам также потребуется использовать jQuery UI. Но при этом плагин поддерживает все эффекты, доступные в этой библиотеке (например, fadeIn или slideDown). Разметка меню опрятная, так как здесь используются вложенные списки.

2. Ascensor

jquery-css-navigation

jQuery-плагин для создания меню со специальной системой размещения контента на странице.

3. jQuery Dropdown Login Form

login-jquery-css-navigation

Простая и миниатюрная выпадающая форма авторизации на jQuery, которую просто установить на страницу.

4. HorizontalNav

horizontalnav-jquery-css-navigation

HorizontalNav представляет собой jQuery-плагин для создания горизонтального резинового меню для сайта, которое растягивается на всю ширину экрана или контейнера. Если вам приходилось создавать подобный эффект, то вы наверняка знаете, насколько это трудно. Плагин значительно облегчает эту задачу, даже если вы используете адаптивный дизайн.

5. jQuery Navigation Plugin

dansdom-jquery-css-navigation

Простой плагин навигации с двумя возможными эффектами: ‘fade’ и ‘slide’.

6. Automatic Ajax jQuery Navigation

ajax-jquery-css-navigation

Задача jQuery-плагина Ajax-Navigation заключается в автоматической трансформации обычных ссылок в Ajax-запросы для мобильных браузеров и отключении отображения адресной строки при нажатии по ссылкам. Это позволяет улучшить опыт взаимодействия с пользователем. Также плагин предлагает функции onLoad и onUnload для каждой страницы, за счет чего можно добиться привлекательных эффектов при их открытии.

7. Kwicks Extended Navigation

kwicks-jquery-css-navigation

Kwicks для jQuery начинал свою историю как часть популярного набора эффектов Mootools, но перерос в отдельный универсальный виджет.

8. CasperJS

casper-jquery-css-navigation

Утилита для создания и тестирования многоуровневого горизонтального меню для сайта с открытым исходным кодом, написанная на JavaScript и основанная на PhantomJS. Она значительно облегчает процесс разработки меню, а также предлагает продвинутые функции и методы.

9. Bootstrap Image Gallery

bootstrap-jquery-css-navigation

Расширение для модального окна из набора инструментов Bootstrap от Twitter, которое позволяет использовать для навигации мышь и клавиатуру. А также включать эффекты перехода, активировать полноэкранный режим, а также запускать слайд-шоу.

10. Flipboard Layout

flipboard-jquery-css-navigation

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

11. TinyNav

tinynav-jquery-css-navigation

Миниатюрный jQuery-плагин, который позволяет конвертировать элементы <ul> и <ol> в выпадающие списки для маленьких экранов. Он также автоматически выделяет текущую страницу и добавляет selected=”selected” для выделенного элемента.

12. stack.js

stack-jquery-css-navigation

Библиотека для презентаций с интуитивной навигацией на базе скроллинга.

13. flexnav

flexnav-jquery-css-navigation

Предоставляет возможность для реализации горизонтального меню с подменю для сайта без привязки к конкретным устройствам.

14. jQuery Keyboard Navigation Plugin

keynav-jquery-css-navigation

Плагин создает меню, с помощью которого можно переходить по элементам на странице, используя стрелки на клавиатуре.

15. Menutron

menutron-jquery-css-navigation

jQuery-плагин для создания адаптивных навигационных меню.

16. jlnav

jlnav-jquery-css-navigation

Представляет собой jQuery-плагин, который позволяет создавать оригинальное горизонтальное меню для сайта на CSS из вложенных неупорядоченных списков.

17. Simple Responsive jQuery Navigation

responsive-jquery-css-navigation

Миниатюрный и простой в использовании фреймворк и jQuery-плагин для создания адаптивных (многоуровневых) навигационных меню.

18. Scrollpath

scrollpath-jquery-css-navigation

Плагин для установки пользователем направления прокрутки. Здесь для прорисовки линий и арок используется синтаксис на основе canvas.

19. filtrify

filtrify-jquery-css-navigation

Продвинутым этот плагин считается потому, что позволяет осуществлять поиск по нескольким критериям одновременно в различных категориях сайт. А также просматривать количество записей, включающих указанные теги в режиме реального времени.

20. Curtain.js

curtain-jquery-css-navigation

Способен превратить ваш сайт в анимированное произведение искусства.

21. PageSlide

pageslide-jquery-css-navigation

jQuery-плагин, который позволяет прокручивать веб-страницу, чтобы открыть дополнительную секцию управления.

22. Smooth Div Scroll

div-scroll-jquery-css-navigation

Простой jQuery-плагин, который позволяет прокручивать контент влево или вправо.

23. HTML5/CSS3 Gray Navigation Menu

html5-navigation-jquery-css-navigation

Простенькое горизонтальное меню для сайта на HTML5 и CSS3.

24. Responsive CSS Navigation Menu

responsive-2-jquery-css-navigation

Это адаптивное меню навигации на CSS3 использует медиа-запросы для достижения гибкости и отзывчивости дизайна. Шаблон способен подстраиваться под экраны любых размеров. Плагин включает в себя три цветовые вариации, в каждой из которых представлены эффекты при наведении курсора.

25. Pro CSS Menu

pro-jquery-css-navigation

Универсальное CSS-меню, которое можно сразу использовать в собственных дизайнах. Оно представлено в нескольких цветовых схемах, а также предлагает возможность настройки при помощи CSS.

26. Bold CSS3 Navigation (платно – $4)

bold-jquery-css-navigation

Современное горизонтальное резиновое меню для сайта с красивыми шрифтами и продуманной цветовой комбинацией. Оно доступно в двух версиях (горизонтальной и вертикальной) и 8 цветовых схемах. Благодаря семантической разметке меню очень просто пользоваться.

27. Modern Vertical Menu (платно – $2)

vertical-jquery-css-navigation

Опрятное и красивое навигационное меню, представленное в двух цветовых схемах. Оно позволяет реализовать выпадающие списки, а также использовать плавные эффекты.

28. Modern Menu (платно – $2)

modern-jquery-css-navigation

Разработан с учетом модных тенденций, гибкости и простоты в использовании. Плагин идеально подойдет для создания быстрого и динамичного меню для сайта.

29. Metro (платно – $3)

metro-jquery-css-navigation

Горизонтальное меню для сайта представлено в нескольких “блочных” вариантах. Плагин предлагает 5 версий анимации изображений, а также несколько других привлекательных эффектов.

30. jQuery jPList Plugin (платно – $5)

jplist-jquery-css-navigation

jPList представляет собой гибкий jQuery-плагин для сортировки, пагинации и фильтрации любых HTML-структур (div-элементов, UL/LI, таблиц и т. д.).

Перевод статьи “Horizontal Menu Collection: 35 Cool jQuery UI Bars” был подготовлен дружной командой проекта Сайтостроение от А до Я.