Для того, чтобы самому написать навигацию в виде вертикального выпадающего меню на jQuery с выпадающим списком подкатегорий, необходимо понять сам принцип работы этого механизма. Но для начала разберем структуру навигации:
Навигация Navigation
Как вы уже догадались, наше выпадающее меню построено на базе маркированных списков. При наведении курсора мыши на тег
- test 1
- test 2
- test 3
- test 4
Но как, спросите вы? Да все на самом деле очень просто. Для начала давайте разберемся с таблицей стилей нашего списка навигации, выглядеть она будет следующим образом:
Body { background: rgb(244, 244, 244);font-family: Verdana;font-weight: 100; } /*---Навигация---*/ #menu { width: 200px; margin: 0; padding: 2px; } #menu li { list-style-type: none; } .menu { position: relative; background: chocolate; background: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); background: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); background: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); border: 1px solid #2AC4B3; } .menu:hover { background: #00c; background: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); background: -webkit-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); background: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); } .menu span { width: 11px; height: 11px; display: block; position: absolute; top: 8px; right: 10px; cursor: pointer; } .menu ul { width: 150px; margin: 0; padding: 1px; position: absolute; top: -1px; left: 198px; } .menu ul li { background: chocolate; background: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); background: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); background: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); border: 1px solid #fff; } .menu ul li:hover { background: #00c; background: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); background: -webkit-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); background: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); } .menu a { padding: 5px; display: block; text-decoration: none; color: white; } .menu a:hover { color: white; } /*---END---*/
Из таблицы стилей видно, что изначально выпадающий список не скрыт, но этот момент мы и будем исправлять при помощи :
$(document).ready(function(){ $(".menu ul").hide(); $(".menu span").css("background", "url("down.png")"); $("#menu li").hover(function(){ $(this).children("ul").show(); /*Эквивалент $("ul", this).show();*/ $(this).find("span").css("background", "url("right.png")"); /*Эквивалент $("span", this).css("background", "url("right.png")");*/ },function(){ $(this).children("ul").hide(); /*Эквивалент $("ul", this).hide();*/ $(this).find("span").css("background", "url("down.png")"); /*$("span", this).css("background", "url("down.png")");*/ }) })
Теперь подробно разберем jQuery код выпадающего меню, т.к. возможно кому-то он будет не совсем понятен. В самом начале прописана следующая конструкция:
$(document).ready(function(){ })
В ней прописываются команды, которые необходимо выполнять после полной загрузки страницы. Сделано это для того, чтобы не появлялись разного рода ошибки, при невозможности найти какой-либо объект из-за того, что он банально ещё не загрузился.
$(".menu ul").hide();
Что означает эта запись? Конструкция «$()» позволяет произвести выборку элементов. Следовательно в самом начале нам необходимо скрыть наш выпадающий список. Мы берем конструкцию «$()» и пишем в ней интересующий нас объект. В нашем случае этим объектом будет маркированный список с классом «menu». Далее прописываем метод «hide()», позволяющий скрыть интересующий нас объект.
$(".menu span").css("background", "url("down.png")");
Что она делает? Она ищет тег родительскому элементу которого присвоен класс «menu» и, при помощи метода "css("background", "url("down.png")")”, происходит присваивание свойству стиля «background» значения «url("down.png")». "down.png" - это иконка, показывающая, что список может раскрываться.
Затем идет конструкция, которая и будет раскрывать наш список, выглядит она следующим образом:
$("#menu li").hover(function(){ $(this).children("ul").show(); $(this).find("span").css("background", "url("right.png")"); },function(){ $(this).children("ul").hide(); $(this).find("span").css("background", "url("down.png")"); }
Мы ищем тег родительскому элементу которого присвоен id="menu”. Далее идет метод "hover” и в скобках две функции. Первая функция будет выполняться при наведении курсора мыши, а вторая выполниться, если курсор мыши покинет интересующий нас элемент.
В первой функции прописано:
$(this).children("ul").show(); $(this).find("span").css("background", "url("right.png")");
Конструкция "$(this)” означает, что нас интересует тот элемент, на который мы в данный момент навели (this от англ. этот). А навели мы на тег
После этого у тега мы ищем потомков, а именно: тег и у него меняем фон на другую иконку.
После этого прописана функция, которая делает все, как было изначально, после того, как курсор мыши покинет элемент списка:
Function(){ $(this).children("ul").hide(); $(this).find(«span»).css("background", "url("down.png")"); }
Чтобы написанный код на jQuery заработал и наше выпадающее меню работало корректно, необходимо скачать с сайта jquery.com библиотеку и подключить её, прописав после открывающего тега строку .
Ну вот и все! В заключении хочу отметить, что если ваш сайт довольно увесист, то возможно, скрипт будет запускаться слишком поздно (сайт будет долго грузиться) и пользователи будут видеть, как сначала раскрывается полностью, а только потом скрывается, что, согласитесь, очень некрасиво. Следовательно, необходимо вынести все jQuery команды за эту конструкцию: «$(document).ready(function(){})». Выглядеть это будет следующим образом:
$(document).ready(function(){ }) $(".menu ul").hide(); $(".menu span").css("background", "url("down.png")"); $("#menu li").hover(function(){ $(this).children("ul").show(); $(this).find(«span»).css("background", "url("right.png")"); },function(){ $(this).children("ul").hide(); $(this).find(«span»).css("background", "url("down.png")"); })
Подключение нашего скрипта необходимо перенести из тега в самый конец, перед закрывающим тегом , либо можно подключить скрипт сразу после маркированного списка.
(cкачиваний: 312)
Так же кому интересно, можете посмотреть на предыдущий способ с помощью CSS, который описан в статье -
Теперь к делу. Как и в прошлой статье, первым делом, давайте напишем HTML код нашего меню. Код такойже как и в той статье, чтобы не было путаницы и было более понятным. Меню с двумя пунктами и оба имеют подменю.
-
пункт 1
- Выпадающий пункт 1
- Выпадающий пункт 2
- Выпадающий пункт 3
-
пункт 2
- Выпадающий пункт 1
- Выпадающий пункт 2
- Выпадающий пункт 3
Если у Вас есть такая строка или схожая, которая уже ранее подключила библиотеку, то вновь делать этого не стоит.
jQuery(document).ready(function($){ $("#slow_nav ul li").hover(function () { $("ul", this).stop().slideDown(400); }, function () { $("ul", this).stop().slideUp(400); }); });
Во второй строке скрипта указываем айди нашего меню. Если Вы применяете данный способ к своему собственному меню, то естественно меняйте имя на свое. В данном случаи это - #slow_nav .
Еще можете настроить время анимации. В данном скрипте на открывание и закрывание стоит значение 400 миллисекунд, это 0,4 секунды. Если хотите можете сменить на большее значение или на меньшее.
Последний шаг, добавление стилей. Они очень схожи со стилями из прошлой статьи, только в них отсутствуют свойства CSS анимации.
#slow_nav > ul{ width: 500px; margin:25px auto 0; } #slow_nav > ul > li{ list-style: none; display: inline-block; position:relative; padding:0; } #slow_nav a{text-decoration:none;} #slow_nav > ul > li > a{ font-size:18px; padding:5px; background-color:#333; color:#fff; } #slow_nav li ul{ position:absolute; list-style:none; text-align:center; top:15px; font-size:15px; left:0; margin:0; padding:0; display:none; } #slow_nav li ul li{ background-color:#333; border-bottom:1px solid #888; } #slow_nav li ul li:last-child{ border-bottom:none; } #slow_nav li ul li a{ padding:5px 12px; color:#fff; display:block; } #slow_nav li ul li:hover{ background-color:#444; } #slow_nav li ul li:first-child{ margin-top:25px; position:relative; } #slow_nav li ul li:first-child:before{ content:""; position:absolute; width:1px; height:1px; border:5px solid transparent; border-bottom-color:#333; left:10px; top:-10px; }
Также к стилям добавлена одна новая строка, с помощью которой скрипт правильно работает. Для элемента - #slow_nav li ul задано свойство display:none; . Если его не добавить, то выпадающее меню будет изначально видно и исчезнет лишь после проведения по нему курсором. Все остальные же стили как предыдущей статье.
Как и прошлый способ, так и этот можно применять не только к самописным меню но и к тем же динамическим меню, которые создаются системами управления сайтом, например WordPress . Для этого нужно немного подправить стили и все. То есть первый HTML код использовать не нужно, только стили. В стилях нужно заменить имя айди #slow_nav на то что будет у Вас, ну и возможно подправить еще что-то по мелочам. Подробно останавливаться не буду. Для каждого случая нужен персональный подход, так что уж извините 🙂
На этом все, спасибо за внимание. 🙂
В этом уроке мы покажем вам, как создавать боковое выпадающее меню для еще более простой навигации по сайту. Такое меню - популярная тенденция в современном веб-дизайне. На многих сайтах используется этот тип меню. С его помощью можно избавиться от хаоса на страницах проекта, сделать его более читаемым, сосредотачивая внимание пользователей на основном контенте.
Это прекрасный способ добиться минимализма без отвлекающих факторов. Сегодня создадим такое меню самостоятельно.
Чтобы создать меню навигации, давайте сначала ознакомимся с настройками:
Animation Menu Demo
Для начала необходимо загрузить Normalize.css и настроить стили браузера по умолчанию, убедиться, что меню выглядит одинаково во всех браузерах. Для отображения стрелки перед элементами меню с подпунктами будем использовать FontAwesome . Для переключения классов в меню загружаем jQuery и перемещаем весь пользовательский jQuery код в script.js. Последняя ссылка является основной таблицей для веб-проекта.
Иконка-гамбургерИконка-гамбургер является общим атрибутом навигации по сайту. Часто она создается при помощи иконочного шрифта, такого как FontAwesome, но в этом уроке мы добавим некоторую анимацию, а потому будем создавать ее с нуля. Наша иконка-гамбургер представляет собой тег span, содержащий три div класса, отображающийся в виде горизонтальных полос.
Стили выглядят следующим образом:
Toggle-button { position: fixed; width: 44px; height: 40px; padding: 4px; transition: .25s; z-index: 15; } .toggle-button:hover { cursor: pointer; } .toggle-button .menu-bar { position: absolute; border-radius: 2px; width: 80%; transition: .5s; } .toggle-button .menu-bar-top { border: 4px solid #555; border-bottom: none; top: 0; } .toggle-button .menu-bar-middle { height: 4px; background-color: #555; margin-top: 7px; margin-bottom: 7px; top: 4px; } .toggle-button .menu-bar-bottom { border: 4px solid #555; border-top: none; top: 22px; } .button-open .menu-bar-top { transform: rotate(45deg) translate(8px, 8px); transition: .5s; } .button-open .menu-bar-middle { transform: translate(230px); transition: .1s ease-in; opacity: 0; } .button-open .menu-bar-bottom { transform: rotate(-45deg) translate(8px, -7px); transition: .5s; }
Иконка имеет фиксированное положение и не меняет его при прокрутке страницы. Также имеет z-index 15, а это значит, что она всегда будет поверх других элементов. Состоит из трех bars, каждый из которых разделяет другие стили. Поэтому мы переместим каждый bar в класс.menu-bar. Остальные стили перемещаем в отдельные классы. Магия происходит тогда, когда мы добавляем другой класс в тег span, который является открытым. Мы добавляем его с помощью jQuery следующим образом:
$(document).ready(function() { var $toggleButton = $(".toggle-button"); $toggleButton.on("click", function() { $(this).toggleClass("button-open"); } ); } );
Для тех, кто не знаком с jQuery - мы инициализируем переменную с $toggleButton, которая содержит нашу иконку. Сохраняем ее в переменной без необходимости использования JavaScript. Затем мы создаем event listener, который учитывает клики по иконке. Каждый раз, когда пользователь кликает по иконке-гамбургеру, event listener запускает функцию toggleClass() , которая переключает класс.button-open.
Когда добавлен класс.button-open, мы можем использовать его для изменения способов отображения элементов. Мы используем CSS3 translate() и rotate() функции, чтобы верхняя и нижняя полосы вращались на 45 градусов, а средняя полоса сдвигалась вправо и исчезала. Вот какую анимацию можно настроить:
Выпадающее меню навигацииТеперь, когда у вас есть иконка-гамбургер, давайте сделаем ее полезной и создадим выпадающее меню при нажатии на нее. Вот как выглядит разметка меню:
Сейчас не будем подробно останавливаться на каждом стиле для этого меню, вместо этого сосредоточимся на нескольких важных моментах. Прежде всего, это div и класс.menu-wrap. Посмотрите на его стили:
Menu-wrap { background-color: #6968AB; position: fixed; top: 0; height: 100%; width: 280px; margin-left: -280px; font-size: 1em; font-weight: 700; overflow: auto; transition: .25s; z-index: 10; }
Положение фиксированное, поэтому при прокрутке страницы меню всегда остается в одном положении. Высота 100% позволяет меню занимать все вертикальное пространство на странице. Обратите внимание, что в поле margin-left установлено отрицательное число, равное ширине меню. Это значит, что меню будет исчезать из окна просмотра. Чтобы сделать его снова видимым, мы создаем другой класс toggler с jQuery. Наш файл JavaScript будет выглядеть так:
$(document).ready(function() { var $toggleButton = $(".toggle-button"), $menuWrap = $(".menu-wrap"); $toggleButton.on("click", function() { $(this).toggleClass("button-open"); $menuWrap.toggleClass("menu-show"); } ); } );
Добавляем другую переменную $menuWrap, которая содержит оболочку меню. Используйте тот же обработчик событий, который мы создали ранее. Только на этот раз переключаем два класса: один для кнопки и один для оболочки меню. Значение левого поля класса.menu-show равно 0, это добавит эффект тени.
Menu-show { margin-left: 0; box-shadow: 4px 2px 15px 1px #B9ADAD; }
Подменю и ссылкиВы можете заметить, что в одном из элементов списка есть класс.menu-item-has-children, который содержит подменю. Кроме того, сразу под ссылкой размещен тег span с классом.sidebar-menu-arrow.
span имеет::after pseudo-element и содержит стрелку FontAwesome. По умолчанию подменю скрыто и будет видно только при нажатии на стрелку. Вот как мы это можем сделать с jQuery:
$(document).ready(function() { var $sidebarArrow = $(".sidebar-menu-arrow"); $sidebarArrow.click(function() { $(this).next().slideToggle(300); } ); } );
Когда мы нажимаем на стрелку, мы вызываем функцию, которая в свою очередь нацелена на следующий элемент сразу после span (в нашем случае это подменю) и делает его видимым. Функцию, которую мы используем - slideToggle . Она заставляет элемент появляться и исчезать. Функция в нашем примере имеет один параметр - длительность анимации.
Элементы меню в примере имеют hover-эффект. Он создается с использованием::after pseudo-element. Код выглядит так:
Menu-sidebar li > a::after { content: ""; display: block; height: 0.15em; position: absolute; top: 100%; width: 102%; left: 50%; transform: translate(-50%); background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%); transition: background-position .2s .1s ease-out; background-size: 200% auto; } .menu-sidebar li > a:hover::after { background-position: -100% 0; }
::after pseudo-element содержит элемент block level внизу каждой ссылки с полной шириной и высотой 0.15em. Выглядит все это как подчеркивание. Особенность заключается в том, что мы не просто применяем цвет фона к линии, мы используем функцию linear-gradient() на фоновом изображении. Хотя эта функция предназначена для создания цветовых градиентов, мы можем менять цвет, указав нужные проценты.
Menu-sidebar li > a::after { background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%); }
Половина лини здесь прозрачная, а вторая половина - желтая. Сделав размер фона 200%, мы удваиваем ширину нашего блока. Теперь прозрачная часть занимает всю ширину ссылки, а желтая часть перемещается влево и становится незаметной. Мы меняем положение фона при наведении на -100%. Теперь желтая часть становится видимой, а прозрачная - скрыта.
Вместо прозрачной части вы можете использовать любой другой цвет. Вы также можете поэкспериментировать с градиентами.
Каждый из рассмотренных нами элементов работает как единое целое. Вы можете создать такое меню, используя любой дизайн сайта из коллекции TemplateMonster. Как видите, сделать это проще, чем можно себе представить. Удачи в создании профессиональных и удобных для пользователей сайтов!
Сегодня я хотел бы сделать подборку относительно нового поколения навигации для сайта - полноэкранные меню
. Они применяются в случаях, когда самой навигации и нет на странице, есть только одна кнопка, при нажатии на которую раскрывается меню. Похожий принцип можно увидеть в -фреймворке , когда строка навигации перестает помещаться, блок со списком пунктов меню просто скрывается. На ее месте появляется кнопка с изображением, как правило, трех полосок. При нажатии выпадает полное меню. Во многих современных сайтах меню постоянно скрыто даже на больших экранах. Сделано это, чтобы не нагружать страницу. Хотя не стоит теперь на всех своих проектах делать так. Если меню носит второстепенное значение, можно и скрыть, но если же у вас большой сайт со сложной структурой, этот вариант лучше не использовать. Итак. С общим принципом работы разобрались, но данный тип меню довольно стандартен, хочется чего-то новенького. Не так давно я начал замечать сайты, у которых навигация не просто выпадает, а открывается полностью во весь экран в попап-окне
. Что-то вроде популярных слайд-панелей , но все это дело занимает всю площадь рабочей области. За сайтами начали появляться и отдельные jQuery плагины
и css3 решения, о которых, собственно, этот топик.
Лично мне такая реализация меню навигации очень нравится, так как она удобная для пользователей с мобильными устройствами и очень эффектно выглядит на больших мониторах. Сайтов с полноэкранными меню
появляется все больше, бесплатных jQuery плагинов также становится больше и концепция постепенно становится трендом.
Итак. К вашему вниманию 20 jQuery плагинов полноэкранного меню
в popup окне.
Очень приятным дополнением к дизайну окна является анимированная SVG иконка. По умолчанию она имеет вид трех полосок, но при нажатии иконка трансформируется в стрелку, которая показывает, что меню можно скрыть.Rounded Animated NavigationЕще один очень крутой jquery скрипт полноэкранной навигации от тех же разработчиков, что и плагин выше. Данный скрипт имеет очень классный и необычный эффект появления. При нажатии на кнопку меню, от иконки, с помощью css3, исходит волна через весь монитор, которая перерастает в фон пунктов меню. Такой же эффект скрытия.
Эта навигация отлично работает на мобильных устройствах, но учитывая, что эффект появления довольно тяжелый, думаю, на старых телефонах все будет тормозить (Я не проверял, так что буду рад, если вы напишите свой опыт в комментариях).
К сожалению, на мобильных телефона работает некорректно: если много пунктов меню, при этом они не помещаются в экран, то вертикальная прокрутка не появляется и навигация просто обрезается.
Отличная стилизация элемента интерфейса в виде раскрывающегося списка.
При наведении мышки на кнопку сверху выезжает панель.
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 панель с различными социальными сервисами