Примеры горизонтальных меню на jquery. Фиксированное меню при прокрутке страницы. Горизонтальное jQuery меню
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 меню «Акварельные кисти»Очень часто на сайтах с большим количеством контента посетитель теряется на странице и чтобы найти навигационное меню приходится листать на самый верх страницы. Технологии не стоят на месте, экраны мониторов и их разрешения становятся больше, потому сейчас на сайте уже не жалко выделить сверху 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()