—»     —»   35 великолепных навигационных меню на jQuery и CSS3
  Раздел: Меню и Навигация   Нет комментариев  

35 великолепных навигационных меню на jQuery и CSS3



Навигация – это один из наиболее важных элементов веб-дизайна. Плохая навигация всегда будет выделяться среди хорошего контента. Хорошее навигационное меню должно быть эстетичным и удобным в использовании. Именно здесь нам на помощь приходят навигационные меню, разработанные при помощи jQuery и CSS3.

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

В нашей сегодняшней подборке мы собрали для вас 35 свежих (большинство было представлено в 2012 году), красивых и очень удобных навигационных меню на jQuery и CSS3. Все что от вас требуется, это лишь оформить их по собственному желанию!

Готовы ли вы познакомиться с представленными сегодня примерами? Давайте же приступим!

01. jMenu

35 великолепных навигационных меню на jQuery и CSS3

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

02. Ascensor

35 великолепных навигационных меню на jQuery и CSS3

Ascensor – это jQuery-плагин, направленный на подстройку и адаптацию контента к системе элеватора.

03. Выпадающая форма авторизации на jQuery

35 великолепных навигационных меню на jQuery и CSS3

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

04. HorizontalNav

35 великолепных навигационных меню на jQuery и CSS3

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

05. Плагин jQuery Navigation

35 великолепных навигационных меню на jQuery и CSS3

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

06. Автоматическая jQuery-навигация с использованием Ajax

35 великолепных навигационных меню на jQuery и CSS3

Цель данного плагина заключается в автоматической трансформации обычных ссылок в Ajax-запросы, предназначенные для мобильных браузеров, что предотвращает отображение адресной строки при произведении клика по ссылке. Это повышает удобство использования, позволяет использовать функции onload и onunload для каждой страницы, на которую производится переход.

07. Расширенная навигация Kwicks

35 великолепных навигационных меню на jQuery и CSS3

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

08. CasperJS

35 великолепных навигационных меню на jQuery и CSS3

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

09. Bootstrap Image Gallery

35 великолепных навигационных меню на jQuery и CSS3

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

10. Flipboard Layout

35 великолепных навигационных меню на jQuery и CSS3

Flipboard Layout – это экспериментальная разметка страницы, которая позволяет вам перелистывать страницы с имитацией реальной книги.

11. TinyNav

35 великолепных навигационных меню на jQuery и CSS3

TinyNav.js – это миниатюрный jQuery-плагин (362 байта при gzip-сжатии), который конвертирует «ul» и «ol» навигации в выпадающие списки для маленьких экранов. Плагин также автоматически выбирает текущую страницу и добавляет параметр selected=”selected” к выделенному пункту.

12. stack.js

35 великолепных навигационных меню на jQuery и CSS3

stack.js – это презентационная библиотека с интуитивной прокручиваемой навигацией.

13. flexnav

35 великолепных навигационных меню на jQuery и CSS3

flexnav предлагает специальный подход к разработке навигаций для комплексных веб-сайтов.

14. jQuery-плагин Keyboard Navigation

35 великолепных навигационных меню на jQuery и CSS3

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

15. Menutron

35 великолепных навигационных меню на jQuery и CSS3

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

16. jlnav

35 великолепных навигационных меню на jQuery и CSS3

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

17. Простая адаптивная навигация на jQuery - ресурс больше не существует

35 великолепных навигационных меню на jQuery и CSS3

Очень маленькая и простая в использовании платформа, jQuery-плагин для адаптивной (и многоуровневой) навигации.

18. Scrollpath

35 великолепных навигационных меню на jQuery и CSS3

Scrollpath представляет собой плагин для создания пользовательских путей прокрутки. Он использует особый синтаксис, с помощью которого воспроизводятся линии и арки.

19. Filtrify

35 великолепных навигационных меню на jQuery и CSS3

Filtrify – это плагин для расширенной фильтрации тэгов, разработанный под вдохновением от Chosen и вертикального меню навигации от Ормана Кларка. Расширенный он потому, что вы можете осуществлять поиск тэгов внутри тэгов и фильтровать пункты по нескольким тэгам с разных категорий.

20. Curtain.js

35 великолепных навигационных меню на jQuery и CSS3

Curtain.js превращает ваш веб-сайт в анимированный прокручиваемый шедевр.

21. PageSlide

35 великолепных навигационных меню на jQuery и CSS3

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

22. Smooth Div Scroll

35 великолепных навигационных меню на jQuery и CSS3

Smooth Div Scroll – это простенький jQuery-плагин, который позволяет нам прокручивать контент в горизонтальном направлении.

23. Серое навигационное меню на HTML5/CSS3

35 великолепных навигационных меню на jQuery и CSS3

Простенькое навигационное меню на HTML5/CSS3.

24. Адаптивное навигационное меню на CSS

35 великолепных навигационных меню на jQuery и CSS3

Данное адаптивное меню на CSS использует media queries для того, чтобы предоставить нам гибкий адаптивный дизайн, который без труда адаптируется под любой размер окна просмотра. Здесь представлены три цветовые вариации, каждая из которых оформлена анимированным стилем при наведении.

25. Pro CSS Menu

35 великолепных навигационных меню на jQuery и CSS3

Pro CSS Menu – это универсальное CSS-меню, готовое к использованию в любом собственном дизайне. Вы без труда сможете оформить меню под собственные нужды, так как оно предлагается в нескольких цветовых схемах.

26. Bold CSS3 Navigation (стоимость – $4)

35 великолепных навигационных меню на jQuery и CSS3

Bold CSS3 Navigation – это современное навигационное меню с красивой типографикой и отличной комбинацией цветов. Здесь представлены 2 версии (горизонтальная и вертикальная) и 8 цветовых схем, которые точно выделят ваши страницы среди других. Меню очень простенькое и им невероятно просто воспользоваться благодаря семантической разметке.

27. Modern Vertical Menu (стоимость – $2)

35 великолепных навигационных меню на jQuery и CSS3

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

28. Modern Menu (стоимость – $2)

35 великолепных навигационных меню на jQuery и CSS3

Modern Menu было оформлено и разработано специально с учетом современных тенденций. Оно очень гибкое и простое в использовании и оформлении. Данный вариант отлично подойдет для создания динамического меню на вашем сайте.

29. Metro (стоимость – $3)

35 великолепных навигационных меню на jQuery и CSS3

Metro – это CSS3-меню, разработанное под вдохновением от пользовательского интерфейса Microsoft Metro. Оно представлено в 4 различных «блочных» разметках, 5 вариантах анимации и многими привлекательными свойствами. Им очень просто воспользоваться и установить его. Вместе с меню представлена хорошая документация и разработано оно было без использования JS/jQuery.

30. jQuery jPList Plugin (стоимость – $5)

35 великолепных навигационных меню на jQuery и CSS3

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

31. Mega Menu Reloaded (стоимость – $5)

35 великолепных навигационных меню на jQuery и CSS3

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

Обучающие руководства

1. Анимированный текст и меню с иконками на jQuery

35 великолепных навигационных меню на jQuery и CSS3

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

2. Меню с анимированным контентом на jQuery

35 великолепных навигационных меню на jQuery и CSS3

В данном руководстве вы сможете найти информацию о том, как создать привлекательное меню с анимированным контентом посредством jQuery для шаблона веб-сайта ресторанного бизнеса. Пункты меню будут анимированы, и при произведении клика будет появляться дополнительная область с информацией. Фоновое изображение так же будет изменяться в зависимости от выбранного пункта меню.

3. Как с помощью CSS3 придать изюминку в меню навигации

35 великолепных навигационных меню на jQuery и CSS3

Быстрое руководство, в котором вам покажут, как можно приукрасить меню с помощью CSS3: добавить изображение к каждому пункту меню и раскрывать его при наведении курсора.

4. Создаем темное меню навигации с псевдо-элементами - Ресурс умер

35 великолепных навигационных меню на jQuery и CSS3

Изучаем процесс разработки темного меню навигации на основе PSD.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, CSS, адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 51565   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930