Обзор 30 лучших бесплатных jQuery меню навигации
В настоящее время jQuery меню навигации это больше, чем просто блоки текста со ссылками в них. В предыдущей статье я рассказал, как с помощью JQuery и CSS3 вы можете создать меню навигации, которое будет выглядеть очень круто.
С помощью возможностей JQuery мы можем превратить меню навигации в динамическое меню. Хотя сейчас для создания динамической навигации можно использовать только CSS3 , JQuery делает меню еще более функциональным.
Помимо динамических функций, дизайн также играет немаловажную роль. Хотя бы потому, что это то, что посетители видят в первую очередь, когда заходят на ваш сайт.
Если меню будет непрезентабельным, это даст пользователям плохой опыт взаимодействия. Хороший дизайн меню в свою очередь увеличит качество вашего сайта, и даст лучший опыт взаимодействия пользователей.
Сегодня я представляю вам 30 отличных примеров JQuery меню навигации.
1. PushyPushy адаптивное, не привязанное к холсту меню навигации, использующее преобразования и переходы CSS . Оно отлично работает на мобильных устройствах. Обязательно посмотрите демо, и оно определенно вам понравится.
2. SlinkyЭто еще одно отличное JQuery -меню для создания красивых прокручиваемых списков навигации. Его отличительной чертой является малый размер исходных файлов.
3. jQuery Pop MenuЭто простое адаптивное всплывающее меню с очень интересными функциями. При нажатии на иконку меню, всплывает окно меню с иконками элементов. Посмотрите демо.
4. SlidebarsSlidebars — JQuery фреймворк для быстрой и простой реализации стилей приложения без привязки к холсту. Slidebars также обрабатывает изменения ориентации и изменение размеров.
5. jQuery Square MenuJQuery меню, которое выводит квадратное анимированное меню сайта с помощью JQuery и CSS3 . Убедитесь в этом, посмотрев демо.
6. Perspective Page View NavigationЭто jQuery меню навигации превращает страницу в 3D меню. Идея заключается в том, чтобы создать дизайн мобильного приложения, в котором при клике по иконке меню, содержимое страницы сдвигается в сторону, а меню выводится на передний план.
7. SlickNavПлагин для создания адаптивного мобильного jQuery меню с несколькими уровнями и гибкой, но простой настройкой. Совместим с разными браузерами, возможна навигация с помощью клавиатуры.
8. MmenujQuery меню для приложений с привязкой и без привязки к холсту с всплывающими подпунктами. Благодаря многочисленным опциях, адд-онам и расширениям, возможна очень гибкая настройка меню.
9. SidrjQuery плагин для создания меню и простого добавления адаптивных функций. С помощью Sidr вы сможете создавать различные элементы своего сайта, а также адаптивные меню.
10. slimMenuslimMenu — это небольшой jQuery плагин, который поможет вам в разработке адаптивных, многоуровневых меню навигации. Что самое классное в нем, так это то, что вы можете иметь несколько разных меню, и все они будут абсолютно адаптивны.
11. HorizontalNavjQuery меню навигации, позволяющее задать горизонтальное меню по всей ширине контейнера. С помощью этого плагина это делается очень просто. Кроме того можно реализовать поддержку для IE7 .
12. FlexNavЭто mobile-first пример использования медиа запросов и JavaScript для создания отличного многоуровневого меню с поддержкой сенсорных экранов, эффектов наведения и навигации с помощью клавиатуры.
13. jQuery Menu-AimjQuery меню, которое запускает события при наведении курсора мыши на выпадающий элемент меню. Идеально подходит для создания адаптивных выпадающих меню, как на Amazon .
14. SmartMenusПлагин jQuery меню, который предлагает простой и интуитивный способ вывода меню. Создает адаптивные списки меню. Работает на всех устройствах!
15. ShifterShifter — простой в использовании mobile-first jQuery плагин для создания слайд-меню, выезжающих с правой стороны при нажатии на кнопку переключения. Для настройки существует только одна опция maxWidth . Она позволяет настроить разрешение/ориентацию для мобильных устройств.
16. HamburgerHamburger — это jQuery плагин для создания слайд-меню в стиле Android App , в котором по правому краю экрана размещается всплывающее меню. При раскрытии меню в полном размере, оно перекрывает область контента, но не панель действий.
17. FocucssFocucss — jQuery меню навигации, с помощью которого создается не привязанное к холсту меню в сайдбаре с крутыми функциями размытости, с помощью которых вы можете обратить внимание пользователей на основные разделы сайта и сделать менее заметными не слишком полезные разделы.
18. DrawerDrawer — jQuery плагин для создания адаптивного, анимированного меню, выезжающего при нажатии из боковой области экрана. Подобные функции вы могли видеть в Android -приложениях.
19. DatmenuDatmenu — премиум jQuery адаптивное меню с различными функциями CSS3 анимации. Что самое замечательное в этом плагине, так это возможность полной настройки с помощью js -опций.
20. jPanelMenujPanelMenu — красивое и современное jQuery меню, позволяющее создавать панельное меню навигации с функциями переходов CSS3 анимации. Стиль jPanelMenu напоминает мобильные версии Facebook и Google . Плагин может использоваться для разнообразных мобильных приложений.
21. Fly Side MenuFly Side Menu — крутой плагин меню навигации, который использует CSS3 для создания бокового меню с 3D преобразованиями и переходами.
22. PageScroll jQuery Menu PluginPageScroll — настраиваемое мобильное jQuery -меню, рекомендованное для использования на любых веб-сайтах, а также целевых страницах.
23. DD Icon MenuDD Icon Menu — это jQuery плагин, который позволяет создавать вертикальное меню иконок, расположенное на краю экрана с разворачивающимися при наведении подпунктами меню.
24. JQuery Mobile Date NavigationjQuery меню, позволяющее осуществлять навигацию по датам в выбранном диапазоне ( неделя, месяц или год ). Идеально для запросов информации с помощью вызовов AJAX .
25. NavobilejQuery плагин меню навигации, позволяющий очень просто создавать мобильные меню. Использует CSS переходы для установки позиции меню на мобильных устройствах.
26. Multi-Level Push Menu
Multi-Level Push Menu — это Javascript библиотека, созданная MARY LOU из Codrops . Она создает многоуровневые меню, выезжающие с левой стороны экрана и сдвигающие контент вправо.
27. Box LidBox Lid — простой jQuery плагин. позволяющий создавать боковое меню навигации с 3D -эффектами ‘Box Lid’ , использующими переходы и преобразования CSS3 .
28. JQuery Mobile Slide MenujQuery слайд-меню, внешне похожее на мобильные меню Facebook и Path .
29. scrollNavscrollNav — это jQuery плагин, который выводит существующий контент веб-страницы, разбивая его на логические разделы и создавая настраиваемый слайд сайдбар навигации.
30. DoubleTapToGoDoubleTapToGo — это jQuery плагин, который помогает создать удобное многоуровневое адаптивное выпадающее меню.
ЗаключениеВот и все! Все эти jQuery плагины обеспечат крутой и приятный дизайн ваших меню. Вы можете использовать их в своих проектах, чтобы произвести впечатление на своих посетителей. Если вам известны другие отличные jQuery меню, напишите об этом в комментариях.