Навигация – это один из наиболее важных элементов веб-дизайна. Плохая навигация всегда будет выделяться среди хорошего контента. Хорошее навигационное меню должно быть эстетичным и удобным в использовании. Именно здесь нам на помощь приходят навигационные меню, разработанные при помощи jQuery и CSS3.
С теми свойствами и уровнем оформления, которые нам предоставляют jQuery и CSS3, мы без труда можем создать превосходную навигацию для веб-сайта. Конечно же, это может показаться немного сложным, если вы не знакомы с данными технологиями. К счастью, есть люди, которые уже написали весь нужный код за нас.
В нашей сегодняшней подборке мы собрали для вас 35 свежих (большинство было представлено в 2012 году), красивых и очень удобных навигационных меню на jQuery и CSS3. Все что от вас требуется, это лишь оформить их по собственному желанию!
Готовы ли вы познакомиться с представленными сегодня примерами? Давайте же приступим!
jMenu представляет собой jQuery-плагин, который позволяет нам создавать горизонтальное навигационное меню с неограниченным числом подпунктов. Кроме jQuery, он также требует наличия jQuery UI и поддерживает все эффекты данной библиотеки (вроде fadeIn или slideDown). Разметка меню очень проста за счет того, что в ней используются вложенные списки.
Ascensor – это jQuery-плагин, направленный на подстройку и адаптацию контента к системе элеватора.
Простенькая выпадающая форма авторизации на jQuery, которую очень просто встроить в веб-сайт. Она очень миниатюрна, но при этом предоставляет вам всё необходимое.
HorizontalNav представляет собой jQuery-плагин, который растягивает горизонтальное навигационное меню по всей ширине контейнера. Если вам когда-либо приходилось делать подобный эффект, то вам должно быть известно, насколько это нудно. Данный плагин в значительной степени облегчает процесс, даже если вы работаете с адаптивным дизайном.
Простой jQuery-плагин для организации навигации с 2 возможными эффектами ‘fade’ и ‘slide’.
Цель данного плагина заключается в автоматической трансформации обычных ссылок в Ajax-запросы, предназначенные для мобильных браузеров, что предотвращает отображение адресной строки при произведении клика по ссылке. Это повышает удобство использования, позволяет использовать функции onload и onunload для каждой страницы, на которую производится переход.
Kwicks для jQuery изначально представлял собой нечто вроде невероятно привлекательного эффекта Mootools, но со временем перерос в очень гибко настраиваемый и универсальный виджет.
CasperJS представляет собой утилиту с открытым исходным кодом, предназначенную для создания и тестирования навигации. Она была написана на javascript, и основана на PhantomJS – невероятном движке WebKit. Она в значительной степени упрощает процесс создания полноценного навигационного меню, и предоставляет удобные функции на высоком уровне, а также методы и синтаксис для выполнения основных задач.
Bootstrap Image Gallery – это расширение для модальных окон в наборе инструментов для Twitter под названием Bootstrap, которое облегчает навигацию по коллекциям изображений в галерее. Здесь представлены функции управления посредством мыши и клавиатуры, эффекты при переходе, полноэкранный режим и функционал слайд-шоу.
Flipboard Layout – это экспериментальная разметка страницы, которая позволяет вам перелистывать страницы с имитацией реальной книги.
TinyNav.js – это миниатюрный jQuery-плагин (362 байта при gzip-сжатии), который конвертирует «ul» и «ol» навигации в выпадающие списки для маленьких экранов. Плагин также автоматически выбирает текущую страницу и добавляет параметр selected=”selected” к выделенному пункту.
stack.js – это презентационная библиотека с интуитивной прокручиваемой навигацией.
flexnav предлагает специальный подход к разработке навигаций для комплексных веб-сайтов.
Плагин jQuery Keyboard Navigation предоставляет возможность навигации по элементам на странице, реализующуюся за счет клавиш на клавиатуре.
Menutron – это jQuery-плагин для адаптивных навигационных меню.
jlNav представляет собой jQuery-плагин, который создает привлекательное небольшое навигационное меню на CSS из вложенных неупорядоченных списков.
17. Простая адаптивная навигация на jQuery - ресурс больше не существует
Очень маленькая и простая в использовании платформа, jQuery-плагин для адаптивной (и многоуровневой) навигации.
Scrollpath представляет собой плагин для создания пользовательских путей прокрутки. Он использует особый синтаксис, с помощью которого воспроизводятся линии и арки.
Filtrify – это плагин для расширенной фильтрации тэгов, разработанный под вдохновением от Chosen и вертикального меню навигации от Ормана Кларка. Расширенный он потому, что вы можете осуществлять поиск тэгов внутри тэгов и фильтровать пункты по нескольким тэгам с разных категорий.
Curtain.js превращает ваш веб-сайт в анимированный прокручиваемый шедевр.
PageSlide – это jQuery-плагин, который прокручивает веб-страницу для того, чтобы предоставить пользователю дополнительную интерактивную панель.
Smooth Div Scroll – это простенький jQuery-плагин, который позволяет нам прокручивать контент в горизонтальном направлении.
Простенькое навигационное меню на HTML5/CSS3.
Данное адаптивное меню на CSS использует media queries для того, чтобы предоставить нам гибкий адаптивный дизайн, который без труда адаптируется под любой размер окна просмотра. Здесь представлены три цветовые вариации, каждая из которых оформлена анимированным стилем при наведении.
Pro CSS Menu – это универсальное CSS-меню, готовое к использованию в любом собственном дизайне. Вы без труда сможете оформить меню под собственные нужды, так как оно предлагается в нескольких цветовых схемах.
Bold CSS3 Navigation – это современное навигационное меню с красивой типографикой и отличной комбинацией цветов. Здесь представлены 2 версии (горизонтальная и вертикальная) и 8 цветовых схем, которые точно выделят ваши страницы среди других. Меню очень простенькое и им невероятно просто воспользоваться благодаря семантической разметке.
Modern Vertical Menu представляет собой опрятное меню навигации, предлагаемое в двух цветовых схемах. Оно предлагает вам функции создания выпадающих меню, и использует плавные эффекты отображения.
Modern Menu было оформлено и разработано специально с учетом современных тенденций. Оно очень гибкое и простое в использовании и оформлении. Данный вариант отлично подойдет для создания динамического меню на вашем сайте.
Metro – это CSS3-меню, разработанное под вдохновением от пользовательского интерфейса Microsoft Metro. Оно представлено в 4 различных «блочных» разметках, 5 вариантах анимации и многими привлекательными свойствами. Им очень просто воспользоваться и установить его. Вместе с меню представлена хорошая документация и разработано оно было без использования JS/jQuery.
jPList – это гибкий jQuery-плагин для сортировки, создания пагинации и фильтрации любой HTML-структуры (DIVs, UL/LI, таблицы и т.д.).
Mega Menu Reloaded представляется с невероятными опциями, и его можно назвать наиболее полноценным решением для создания мега-меню навигации. Оно так же работает без JS, но при этом большинство контента остается доступным, если поддержка JS будет отключена. Опциональные свойства вроде формы контактов или вкладок можно изменять и убирать по собственному усмотрению.
В данном руководстве вы сможете найти информацию о том, как создать привлекательное меню с анимированным контентом посредством jQuery для шаблона веб-сайта ресторанного бизнеса. Пункты меню будут анимированы, и при произведении клика будет появляться дополнительная область с информацией. Фоновое изображение так же будет изменяться в зависимости от выбранного пункта меню.
Быстрое руководство, в котором вам покажут, как можно приукрасить меню с помощью CSS3: добавить изображение к каждому пункту меню и раскрывать его при наведении курсора.
4. Создаем темное меню навигации с псевдо-элементами - Ресурс умер
Изучаем процесс разработки темного меню навигации на основе PSD.
Мы собрали подборку свежих, красивых и удобных горизонтальных меню для сайта, созданных с помощью 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
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-плагин , который позволяет конвертировать элементы
- и
- в выпадающие списки для маленьких экранов. Он также автоматически выделяет текущую страницу и добавляет 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)
Опрятное и красивое навигационное меню, представленное в двух цветовых схемах. Оно позволяет реализовать выпадающие списки, а также использовать плавные эффекты.
Портала с замысловатыми меню. Решили писать скрипты только в том случае, если не найдем в сети того, что нужно. Задумывалось несколько разных навигаций с разными особенностями. К нашему счастью, нашлось практически все, кроме одного. Однако, как раз перед началом работы над написанием этого меню, все же удалось найти то, что нужно.
Попробовали довольно много адаптивных меню
. В этом топике я решил сделать подборку наиболее стоящих и интересных из тех, что пришлось нам опробовать. Все адаптивные меню
не похожи друг на друга и разработаны исключительно для определенных задач.
Итак. Вашему вниманию 5 адаптивных меню
на все случаи жизни.
flexMenu
Это именно то меню, которое было так тяжело найти и функционал которого мы уже собирались начать писать.flexMenu - меню , которое подойдет для сайтов с динамически изменяющейся шириной. Главная и уникальная его особенность - это добавление пункта «Еще» и перенос в его выпадающий список пунктов, которые не помещаются в ширину всей навигации. То есть, если мы будем смотреть на больших мониторах, увидим все пункты. Как только начнем сжимать окно браузера, появится в конце меню пункт «Еще» и в его выпадающий список будут динамически перемещаться пункты, которые не помещаются по мере сжатия окна. Таким образом, у нас получится меню с фиксированной высотой и «играющей» шириной.
При работе с flexMenu мы столкнулись с одной проблемой. В нашем случае справа был логотип с float: left;, справа размещалось данное меню также с float: left; и справа с float: right; был еще один блок. При ресайзе окна браузера получалось, что блок справа перепрыгивал под меню, далее все это перепрыгивало под логотип и потом уже задействовался функционал сжатия меню. Как бороться с данной особенностью верстки, будет в последующих топиках. Следите за обновлениями.
Code a Responsive Navigation Menu
Отличный пример меню навигации . При ресайзе окна браузера мы увидим, что пункты переходят друг под друга и выравниваются по ширине. Смотрится очень аккуратно. Самое главное, данное адаптивное меню будет отлично смотреться на мобильных устройствах и, что более преимущественно, оно удобно в использовании на девайсах с тач дисплеем.
Multi-level Flat Menu - адаптивная навигация
Multi-level Flat Menu - это адаптивное, многоуровневое меню , работающее с помощью библиотек Jquery. На десктопных мониторах мы видим обычное, привычное нам горизонтальное меню. На мобильных устройствах горизонтальная навигация трансформируется в выпадающий список.Multi-level Flat Menu - отличный выбор, если вам требуется сэкономить место на странице.
Очень часто на сайтах с большим количеством контента посетитель теряется на странице и чтобы найти навигационное меню приходится листать на самый верх страницы. Технологии не стоят на месте, экраны мониторов и их разрешения становятся больше, потому сейчас на сайте уже не жалко выделить сверху 40 пикселей под фиксированное меню при прокрутке страницы сайта. Посетитель сможет всегда видеть в каком он разделе находится, а также иметь быстрый доступ к навигационному меню. В конце концов это увеличивает глубину просмотра сайта:)
Какова суть фиксированного навигационного меню на сайте? Изначально наше меню находится на привычном ему месте, где-то в шапке, в моем случае на расстоянии 140px от верхнего края. Как только посетитель прокручивает страницу на эти самые 140px внизу, меню фиксируется в самом верху окна и там остается все оставшееся время, пока скролл не будет возвращен вновь в верхнее положение.
Фиксированное меню при прокрутке страницы это по сути панель управления, которая всегда с тобой. Меню у нас будет простое, .
От теории к практике. Все достаточно просто и минималистично, большая часть когда отдается стилям, которые вы уже сами настраиваете под себя. Я сделала фиксированное меню как на рисунке, при скролле цвет меню становится чуть прозрачным, чтобы оно не выглядело тяжелым и под ним был виден контент.
Наши стили. У меня меню шириной 1180px, расположено по центру. Шапка высотой 180px, меню с прокруткой в него входит и занимает 40px. Значит расстояние от верха 140px . Запомним это число)
#header { height: 180px; } #navigation{ background: #EF0505; height: 40px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); font-size: 16px; line-height: 40px; position: relative; top: 140px; } #navigation.fixed{ position: fixed; top: 0; width: 100%; background: rgba(239, 5, 5, 0.95); } #navigation ul{ width: 1180px; padding-left: 0; margin: 0 auto; display: block; } #menu li{ float: left; list-style: none; padding: 0 25px; border-right: 1px solid #D60000; } #menu a { color: #fff; text-decoration: none; font-family: Verdana; } #menu>li a:hover{ color: #656565; transition: color 0.5s ease; }
И вот те несколько строчек кода, которые творят волшебство) Мы задаем условия прокрутки страницы, выше 140px или ниже. В зависимости от этого присваивается класс fixed для нашего навигационного меню. А с этим классом, как указано выше мы делаем меню фиксированным и закрепленным сверху.
JQuery(function($) { $(window).scroll(function(){ if($(this).scrollTop()>140){ $("#navigation").addClass("fixed"); } else if ($(this).scrollTop()<140){ $("#navigation").removeClass("fixed"); } }); });
Число 140 вы можете заменить на любое другое. Это ваш отступ меню от верхнего края.
На котором можно создавать файлы примеров для использования их в проектах. В данной статье мы рассмотрим примеры различных меню, авторы которых разместили свой код на codepen.io.
Простые меню вы можете разобрать с помощью . Здесь же будут рассмотрены примеры различных меню, появляющихся по клику на кнопке. В этих меню, помимо css-форматирования, используется код на JavaScript/jQuery.
Flexbox-меню с перекрытием экрана
Верстка меню основана на модели Flexbox. При появлении элементов меню происходит перекрытие экрана. Используются и анимация с помощью свойства transition . Также используется код на jQuery.
Меню со слайд-эффектом
При клике на элементах этого меню используется плавный переход подчеркивания для активной ссылки. Здесь есть не только css-форматирование, но и код на jQuery.
В примере используются html-, css- и js-препроцессоры. Если код вам непонятен, нажмите на стрелку в правом верхнем углу соответствующей вкладки и выберите пункт "View compiled HTML" и т.п. при редактировании этого примера на Codepen .
Цветное навигационное меню на основе CSS и jQuery
В этом css-меню используется эффект изменения цвета активной точки при наведении на один из пунктов. Как и в предыдущих меню, без jQuery здесь не обошлось.
Скошенное меню
В этом меню внешний вид обеспечивается с помощью CSS3-свойства transform: skew() . Очень интересный вид, полученный путем списка ссылок.
CSS меню с эффектами при прокручивании и наведении
В этом меню использованы эффекты при прокручивании (скроллинге), связанные с 3d-трансформациями и увеличении масштаба при наведении. Также не обошлось без JavaScript.
Интересное меню с различными цветами и иконками для пунктов меню. Оно предполагает разворачивание на весь экран.
Меню для мобильной версии сайта или приложения
Это меню "заточено" под мобильную версию сайта или мобильное приложение. Используется не только css-форматирование, но и JavaScript-код.
Анимационное меню с SVG (UI Navigation Concept)
Меню, предназначенное опять-таки либо для мобильной версии сайта, либо для мобильного приложения. В нем используются анимации SVG и CSS3 без подключения сторонних библиотек + код на JavaScript.
Желеобразное меню для мобильных устройств
Очень интересное меню с приятной анимацией при скроллинге и прикосновении на мобильных устройствах. Требует подключения множества библиотек.
Боковое css-меню c иконкой-гамбургером
Приятное боковое выезжающее меню с CSS-анимацией появления самого меню и изменения иконки-гамбургера. Подойдет как для основной версии сайта, так и для мобильной. Помимо CSS, используется код на jQuery.
Боковая панель с меню
Меню расположено на боковой выезжающей панели справа. При появлении меню основной контент сдвигается влево. Использован код на JS.
Выезжающее сверху CSS меню
При нажатии на кнопку-гамбургер сверху с анимацией появляется меню. Контент смещается вниз с отступами слева и справа. Помимо css-transition использован несложный код на jQuery.
See the Pen Off canvas menu by Mark Murray (
