Фиксированное меню при прокрутке страницы. «Scrolling menu» XML меню с прокруткой. Интересные jQuery меню с различными эффектами

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

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

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

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

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

Сегодня я представляю вам 30 отличных примеров JQuery меню навигации.

1. Pushy

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

Демо | Скачать

2. Slinky


Это еще одно отличное JQuery -меню для создания красивых прокручиваемых списков навигации. Его отличительной чертой является малый размер исходных файлов.

Демо | Скачать

3. jQuery Pop Menu


Это простое адаптивное всплывающее меню с очень интересными функциями. При нажатии на иконку меню, всплывает окно меню с иконками элементов. Посмотрите демо.

Демо | Скачать

4. Slidebars


Slidebars — JQuery фреймворк для быстрой и простой реализации стилей приложения без привязки к холсту. Slidebars также обрабатывает изменения ориентации и изменение размеров.

Демо | Скачать

5. jQuery Square Menu


JQuery меню, которое выводит квадратное анимированное меню сайта с помощью JQuery и CSS3 . Убедитесь в этом, посмотрев демо.

Демо | Скачать

6. Perspective Page View Navigation


Это jQuery меню навигации превращает страницу в 3D меню. Идея заключается в том, чтобы создать дизайн мобильного приложения, в котором при клике по иконке меню, содержимое страницы сдвигается в сторону, а меню выводится на передний план.

Демо | Скачать

7. SlickNav


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

Демо | Скачать

8. Mmenu


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

Демо | Скачать

9. Sidr


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

Демо | Скачать

10. slimMenu


slimMenu — это небольшой jQuery плагин, который поможет вам в разработке адаптивных, многоуровневых меню навигации. Что самое классное в нем, так это то, что вы можете иметь несколько разных меню, и все они будут абсолютно адаптивны.

Демо | Скачать

11. HorizontalNav


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

Демо | Скачать

12. FlexNav


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

Демо | Скачать

13. jQuery Menu-Aim


jQuery меню, которое запускает события при наведении курсора мыши на выпадающий элемент меню. Идеально подходит для создания адаптивных выпадающих меню, как на Amazon .

Демо | Скачать

14. SmartMenus


Плагин jQuery меню, который предлагает простой и интуитивный способ вывода меню. Создает адаптивные списки меню. Работает на всех устройствах!

Демо | Скачать

15. Shifter


Shifter — простой в использовании mobile-first jQuery плагин для создания слайд-меню, выезжающих с правой стороны при нажатии на кнопку переключения. Для настройки существует только одна опция maxWidth . Она позволяет настроить разрешение/ориентацию для мобильных устройств.

Демо | Скачать

16. Hamburger


Hamburger — это jQuery плагин для создания слайд-меню в стиле Android App , в котором по правому краю экрана размещается всплывающее меню. При раскрытии меню в полном размере, оно перекрывает область контента, но не панель действий.

Демо | Скачать

17. Focucss


Focucss — jQuery меню навигации, с помощью которого создается не привязанное к холсту меню в сайдбаре с крутыми функциями размытости, с помощью которых вы можете обратить внимание пользователей на основные разделы сайта и сделать менее заметными не слишком полезные разделы.

Демо | Скачать

18. Drawer


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

Демо | Скачать

19. Datmenu


Datmenu — премиум jQuery адаптивное меню с различными функциями CSS3 анимации. Что самое замечательное в этом плагине, так это возможность полной настройки с помощью js -опций.

Демо | Скачать

20. jPanelMenu


jPanelMenu — красивое и современное jQuery меню, позволяющее создавать панельное меню навигации с функциями переходов CSS3 анимации. Стиль jPanelMenu напоминает мобильные версии Facebook и Google . Плагин может использоваться для разнообразных мобильных приложений.

Демо | Скачать

21. Fly Side Menu


Fly Side Menu — крутой плагин меню навигации, который использует CSS3 для создания бокового меню с 3D преобразованиями и переходами.

Демо | Скачать

22. PageScroll jQuery Menu Plugin


PageScroll — настраиваемое мобильное jQuery -меню, рекомендованное для использования на любых веб-сайтах, а также целевых страницах.

Демо | Скачать

23. DD Icon Menu


DD Icon Menu — это jQuery плагин, который позволяет создавать вертикальное меню иконок, расположенное на краю экрана с разворачивающимися при наведении подпунктами меню.

Демо | Скачать

24. JQuery Mobile Date Navigation


jQuery меню, позволяющее осуществлять навигацию по датам в выбранном диапазоне (неделя, месяц или год ). Идеально для запросов информации с помощью вызовов AJAX .

Демо | Скачать

25. Navobile


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

Демо | Скачать

26. Multi-Level Push Menu


Multi-Level Push Menu — это Javascript библиотека, созданная MARY LOU из Codrops . Она создает многоуровневые меню, выезжающие с левой стороны экрана и сдвигающие контент вправо.

Демо | Скачать

Портала с замысловатыми меню. Решили писать скрипты только в том случае, если не найдем в сети того, что нужно. Задумывалось несколько разных навигаций с разными особенностями. К нашему счастью, нашлось практически все, кроме одного. Однако, как раз перед началом работы над написанием этого меню, все же удалось найти то, что нужно.
Попробовали довольно много адаптивных меню . В этом топике я решил сделать подборку наиболее стоящих и интересных из тех, что пришлось нам опробовать. Все адаптивные меню не похожи друг на друга и разработаны исключительно для определенных задач.
Итак. Вашему вниманию 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 - отличный выбор, если вам требуется сэкономить место на странице.

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

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

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




  • Навигация сайта



    • ZORNET.RU

    • Search

    • Graphs

    • Settings





  • ZORNET.RU #1



    • Скрипты для uCoz

    • Шаблоны для uCoz

    • Самоучитель HTML и CSS

    • Ajax окна для uCuz

    • Меню для сайта uCoz




  • ZORNET.RU #2



    • ZorNet: Создание сайта на uCoz

    • Current Создание сайта на uCoz

    • Previous Создание сайта на uCoz

    • Next Создание сайта на uCoz

    • Next Создание сайта на uCoz

    • Team Создание сайта на uCoz

    • Private Calendar

    • Settings




  • ZORNET.RU #3



    • Global favs

    • My favs

    • Team favs

    • Settings





​JavaScript

/*jQuery time*/
$(document).ready(function(){
$("#accordian h3").click(function(){
//slide up all the link lists
$("#accordian ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})


CSS

/*Basic reset*/
* {margin: 0; padding: 0;}

Body {
background: #4EB889;
font-family: Nunito, arial, verdana;
}
#accordian {
background: #004050;
width: 250px;
margin: 100px auto 0 auto;
color: white;
/*Some cool shadow and glow effect*/
box-shadow:
0 5px 15px 1px rgba(0, 0, 0, 0.6),
0 0 200px 1px rgba(255, 255, 255, 0.5);
}
/*heading styles*/
#accordian h3 {
font-size: 12px;
line-height: 34px;
padding: 0 10px;
cursor: pointer;
/*fallback for browsers not supporting gradients*/
background: #003040;
background: linear-gradient(#003040, #002535);
}
/*heading hover effect*/
#accordian h3:hover {
text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
/*iconfont styles*/
#accordian h3 span {
font-size: 16px;
margin-right: 10px;
}
/*list items*/
#accordian li {
list-style-type: none;
}
/*links*/
#accordian ul ul li a {
color: white;
text-decoration: none;
font-size: 11px;
line-height: 27px;
display: block;
padding: 0 15px;
/*transition for smooth hover animation*/
transition: all 0.15s;
}
/*hover effect on links*/
#accordian ul ul li a:hover {
background: #003545;
border-left: 5px solid lightgreen;
}
/*Lets hide the non active LIs by default*/
#accordian ul ul {
display: none;
}
#accordian li.active ul {
display: block;
}


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

1. Вертикальное яркое jQuery меню

2. Прикольный эффект. Танцующее меню.

4. Выпадающий список с применением jQuery

Отличная стилизация элемента интерфейса в виде раскрывающегося списка.

При наведении мышки на кнопку сверху выезжает панель.

6. jQuery плагин «MobilyBlocks» для отображения кругового меню

7. Меню с использованием спрайтов

Анимированное javascript меню с эффектом свечения.

Свежее симпатичное меню на jQuery.

9. jQuery меню «GarageDoor»

10. jQuery меню с вертикальной прокруткой

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

11. jQuery оформление выпадающего списка

12. Плагин навигации по странице

Плавная прокрутка к нужному разделу на странице. Плагин «jQuery One Page Navigation».

13. Плагин «Animated Content Menu»

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

14. jQuery плагин меню «Sweet Menu»

Анимированное меню с выезжающими пунктами.

15. Фиксированное jQuery меню

При прокрутке страницы вниз, меню остается зафиксировано сверху экрана.

16. Прокручивающиеся меню «Slider Kit»

Для реализации вертикльного меню с большим количеством пунктов. Прокрутка пунктов осуществляется с помощью колеса мыши, либо с помощью ссылок «Previos» и «Next».

17. Стильное CSS3 меню

18. Новое CSS3 меню в стиле Apple

Новое меню в стиле Apple. Выглядит темнее того, что было ранее, но не менее симпатично.

19. Оригинальное jQuery меню

Выпадающее меню с фоновым эффектом. Подпункты меню разворачиваются вверх. При наведении на пункт меню сменяется фоновое изображение.

20. Анимированное меню на jQuery

Анимированное меню. Пункты меню представлены в виде иконок и описания. несколько отличных эффектов при наведении курсора мышки на пункт меню. Предусмотрено 8 эффектов, чтобы посмотреть их все - пройдите по ссылкам Exemple1-Exemple8 на демонстрационной странице.

21. «Scrolling menu» XML меню с прокруткой

Вертикальное и горизонтально меню с прокруткой. Хорошее решение при большом количестве пунктов в меню.

22. Контекстное меню на сайте на jQuery

Меню всплывает по нажатию правой кнопкой мыши на определенной области.

23. Круговое двухуровневое меню для сайта

При выборе пункта меню, справа отображаются пункты подменю.

24. jQuery CSS3 меню с эффектом размытия «Blur Menu» CSS3

Оригинальное jQuery CSS3 меню выполнено в 7 различных стилевых оформлениях. При наведении курсора мыши на один из пунктов меню остальные как бы размываются.

25. Несколько эффектных анимированных jQuery CSS3 меню

10 креативных анимированных меню. Горизонтальные и вертикальные CSS3 меню с различными эффектами и переходами.

В архив также вложен исходный PSD файл меню.

27. Меню MagicLine

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

28. Image Bubbles

Отличный эффект, при наведении мышки на одно из изображений. Эффект чем-то напоминает jQDock, описанный выше.

31. Интересные jQuery меню с различными эффектами

Горизонтальное, вертикальное меню. Интересные эффекты.

32. Отличное jQuery меню в стиле Apple

34. jQuery меню с интересным эффектом

36. Свежее меню с интересным эффектом на jQuery

Очень интересный эффект. Отлично подойдет для оформления сайтов-портфолио.

Интересный эффект выплывающих миниатюр при наведении.

40. Выпадающий список с автоскроллингом

Симпатичный эффект перехода между пунктами.

42. Отличное jQuery меню

43. Красивое большое jQuery меню

44. Прокручивающиеся jQuery меню

Пункты меню представлены в виде миниатюр.

46. Круговое меню навигации jQuery

47. CSS и jQuery меню

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

48. Горизонтальное jQuery меню

49. Вертикальное jQuery меню

Отличное вертикально меню. При наведении курсора выплывает пункт меню.

50. Горизонтальное jQuery меню

Интересный эффект при наведении курсора на пункт меню.

52. Раскрывающееся jQuery меню

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

53. CSS и jQuery панель навигации

Интересный эффект при наведении курсора мыши на пункт меню.

54. Всплывающая jQuery панель

Свежее анимированное меню в серых тонах.

58. Колоночная навигация по сайту на jQuery

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

59. jQuery навигация по сайту

Навигация по сайту представлена в виде 4 картин, при наведении на которую вы заметите интересный анимированный эффект.

60. Панель навигации прокручивается вместе с содержимым

Панель навигации. При нажатии на стрелку происходит прокрутка страницы. Навигация прокручивается вместе с содержимым страницы.

61. jQuery панель с различными социальными сервисами

62. Аккуратное анимированное jQuery меню

63. jQuery меню «Акварельные кисти»

  • Сергей Савенков

    какой то “куцый” обзор… как будто спешили куда то