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

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

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

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

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

Содержание

1. jMenu


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

2. Ascensor


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

3. jQuery Dropdown Login Form


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

4. HorizontalNav


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

5. jQuery Navigation Plugin


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

6. Automatic Ajax jQuery Navigation


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

7. Kwicks Extended Navigation


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

8. CasperJS


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

9. Bootstrap Image Gallery


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

10. Flipboard Layout


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

11. TinyNav


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

12. stack.js


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

13. flexnav


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

14. jQuery Keyboard Navigation Plugin


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

15. Menutron


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

16. jlnav


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

17. Simple Responsive jQuery Navigation


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

18. Scrollpath


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

19. filtrify


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

20. Curtain.js


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

21. PageSlide


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

22. Smooth Div Scroll


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

23. HTML5/CSS3 Gray Navigation Menu


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

24. Responsive CSS Navigation Menu


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

25. Pro CSS Menu


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

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


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

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


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

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


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

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


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

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


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

Данная публикация представляет собой перевод статьи «Horizontal Menu Collection: 35 Cool jQuery UI Bars» , подготовленной дружной командой проекта Интернет-технологии.ру