Всплывающее меню jquery. JQuery: выпадающее меню с использованием cookie

Для того, чтобы самому написать навигацию в виде вертикального выпадающего меню на 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 от англ. этот). А навели мы на тег

. Далее у тега при помощи метода «children("ul")» мы ищем вложенный тег и методом «show()» отображаем его.

После этого у тега мы ищем потомков, а именно: тег и у него меняем фон на другую иконку.

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

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качиваний: 314)

В настоящее время 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 переходы для установки позиции меню на мобильных устройствах.

Сегодня я хотел бы сделать подборку относительно нового поколения навигации для сайта - полноэкранные меню . Они применяются в случаях, когда самой навигации и нет на странице, есть только одна кнопка, при нажатии на которую раскрывается меню. Похожий принцип можно увидеть в -фреймворке , когда строка навигации перестает помещаться, блок со списком пунктов меню просто скрывается. На ее месте появляется кнопка с изображением, как правило, трех полосок. При нажатии выпадает полное меню. Во многих современных сайтах меню постоянно скрыто даже на больших экранах. Сделано это, чтобы не нагружать страницу. Хотя не стоит теперь на всех своих проектах делать так. Если меню носит второстепенное значение, можно и скрыть, но если же у вас большой сайт со сложной структурой, этот вариант лучше не использовать. Итак. С общим принципом работы разобрались, но данный тип меню довольно стандартен, хочется чего-то новенького. Не так давно я начал замечать сайты, у которых навигация не просто выпадает, а открывается полностью во весь экран в попап-окне . Что-то вроде популярных слайд-панелей , но все это дело занимает всю площадь рабочей области. За сайтами начали появляться и отдельные jQuery плагины и css3 решения, о которых, собственно, этот топик.
Лично мне такая реализация меню навигации очень нравится, так как она удобная для пользователей с мобильными устройствами и очень эффектно выглядит на больших мониторах. Сайтов с полноэкранными меню появляется все больше, бесплатных jQuery плагинов также становится больше и концепция постепенно становится трендом.
Итак. К вашему вниманию 20 jQuery плагинов полноэкранного меню в popup окне.

Full-Screen Pushing NavigationОдин из лучших, на сегодняшний день, бесплатный скрипт полноэкранной навигации . При нажатии на кнопку «Меню» появляется навигация, плюс предусмотрен блок с контактами, это очень удобно для посетителя сайта, так как путь до звонка становится на 1 клик меньше. Хочу заметить, что скрипт и на мобильных устройствах блок с контактами становится под навигацией.
Очень приятным дополнением к дизайну окна является анимированная SVG иконка. По умолчанию она имеет вид трех полосок, но при нажатии иконка трансформируется в стрелку, которая показывает, что меню можно скрыть.Rounded Animated NavigationЕще один очень крутой jquery скрипт полноэкранной навигации от тех же разработчиков, что и плагин выше. Данный скрипт имеет очень классный и необычный эффект появления. При нажатии на кнопку меню, от иконки, с помощью css3, исходит волна через весь монитор, которая перерастает в фон пунктов меню. Такой же эффект скрытия.
Эта навигация отлично работает на мобильных устройствах, но учитывая, что эффект появления довольно тяжелый, думаю, на старых телефонах все будет тормозить (Я не проверял, так что буду рад, если вы напишите свой опыт в комментариях).

Perspective Page View NavigationЕще один эффектный скрипт полноэкранного меню . При нажатии на кнопку меню, видимая часть страницы отодвигается в сторону с эффектом , на освободившемся пространстве появляется меню. Есть несколько эффектов анимации появления.
К сожалению, на мобильных телефона работает некорректно: если много пунктов меню, при этом они не помещаются в экран, то вертикальная прокрутка не появляется и навигация просто обрезается.

Full Page Intro & NavigationДовольно простой скрипт полноэкранного меню . Не могу сказать, что очень эффектный, но на мобильных устройствах будет удобным.

Fly Side MenuЕще одно полноэкранное меню , при котором видимая часть с 3D эффектом отодвигается в сторону, но уже от других разработчиков. В отличии от предыдущего аналогичного скрипта, этот должен хорошо работать на мобильных устройствах, так как если меню не помещается в экран, появляется вертикальная прокрутка.

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

Давайте сперва рассмотрим HTML-разметку

Простое выпадающее меню основанное на jQuery Простое выпадающее меню

Home
Products
Services
Contact Us

Content

Есть простой неупорядоченный список ul , его теги li - это основа навигационного меню. Далее добавьте нижеприведенный код в соответствующий тег li , этим вы структурируете выпадающий список .

Если вы внимательны, вы отметите две вещи:

1. У тега li присутствует класс dropdown .
2. Ссылка-родитель имеет класс ddIcon .

Класс dropdown используется в jQuery, для того чтобы открыть/спрятать выпадающее меню. Второй класс ddIcon используется для отображения указателя на выпадающее меню.

В стилях меню нет ничего особенного - обычные стили:

Container { width: 960px; margin: 0 auto; padding-top: 50px; } .container h1 { font-size: 30px; color: #666; margin-bottom: 1em; } .container nav { border-radius: 4px; background-color: #fff; height: 37px; } .container nav ul li { position: relative; float: left; } .container nav ul li a { font-size: 12px; text-decoration: none; font-weight: bold; text-transform: uppercase; color: #545454; padding: 13px 15px; display: block; border-right: 1px solid #f9f9f9; } .container nav ul li a.ddIcon { background: transparent url("dd.png") no-repeat 86% 52%; padding: 13px 25px 13px 15px; } .container nav ul li a:hover { background-color: #cc333f; color: #fff; } .container nav ul li.active a { background-color: #cc333f; color: #fff; } .container nav ul li:first-child a { border-radius: 4px 0 0 4px; } .container nav ul li .subNav { position: absolute; background-color: #cc333f; padding: 15px 15px 20px; width: 172px; left: 0px; top: 38px; display: none; } .container nav ul li .subNav .navSection { padding: 5px 0; } .container nav ul li .subNav h4 { margin-bottom: 0.5em; } .container nav ul li .subNav h4 a { font-size: 11px; color: #edc951; text-transform: capitalize; border-bottom: 1px solid #D33B47; padding: 7px 10px; } .container nav ul li .subNav h4 a:hover { color: #edc951; } .container nav ul li .subNav h4 a span { float: right; font-size: 10px; color: #fff; -moz-transition: color 0.5s ease 0s; } .container nav ul li .subNav h4 a span:hover { color: #390206 } .container nav ul li .subNav a { float: none; border: none; display: block; text-transform: capitalize; color: #fff; padding: 7px 15px; -moz-transition: color 0.5s ease 0s; line-height: 1.3; } .container nav ul li .subNav:hover { color: #390206; } .container .section { clear: both; padding: 10px; } .container .section article p { font-size: 16px; color: #488fb8; line-height: 1.3; } .container .section article header p { padding-top: 20px; font-size: 20px; color: #333; line-height: 1.3; margin-bottom: .4em; }

Теперь необходимо оживить выпадающее меню . В этом нам поможет простейшая функция jQuery.

$(function(){ $("li.dropdown").hover(function() { if ($("this:has(div.subNav)")){ $(".subNav").css({"display":"none"}); $(".subNav", this).css({"display":"block"}); $("nav ul li").css({"position":"relative", "z-index":"1001"}); $(this).addClass("active"); } }, function(){ $(".subNav").css({"display":"none"}); $(this).removeClass("active"); $("nav ul li").css({"position":"relative", "z-index":"1"}); }); });

Для каждого элемента списка возможно создать свое выпадающее меню: внутри элемента li расположите блок с классом.subnav , а также самому li присвойте класс.dropdown .

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

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

HTML

Сначала построим основной шаблон HTML5. Потребуется последняя версия jQuery , которую мы получаем из API Google. Также добавляем файл стилей styles.css , который будет представлен ниже:

Горизонтальная навигационная панель | Материалы сайта сайт

Теперь рассмотрим структуру, которая построена на основе неупорядоченного списка в верху страницы. Весь список помещается в элемент HTML5 для лучших результатов SEO.

Главная
О нас
- Миссия
- Команда
- История
Продукты
- Логитипы
- Шаблоны
- Иконки
- Плагины jQuery
- маркетинг Internet
Интернационализация
- Китай
- Япония
- Канада
- Автсралия
- Южная Америка
Контакт

Структура кода достаточно простая. Каждый пункт списка включает эффект выделения, когда курсор мыши находится в нем. Все внутренние элементы UL содержатся внутри оригинального пункта списка, поэтому фокус ввода не теряется при перемещении на пункты выпадающего меню.

Стили навигации

Таблица стилей содержит код сброса значений свойств по умолчанию. Многие разработчики включают файл от Eric Meye , но для нашего случая он слишком громоздкий. К тому же код хранится на другом сервере, что само по себе является плохим решением в данном случае.

Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { height: 101%; } body { background: #eaeaea url("images/bg.png"); font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; padding-bottom: 60px; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } strong { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } img { border: 0; max-width: 100%; }

В коде есть интересное свойство -webkit-font-smoothing . Оно предназначено для сглаживания шрифтов при работе кода в браузерах под управлением Mac OS X или iOS.

Теперь перейдем к нашему меню.

#ddmenu { display: block; width: 100%; height: 80px; margin: 0 auto; padding: 0 15px; background: #fff; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: 0 1px 1px rgba(20, 20, 20, 0.2); cursor: pointer; outline: none; font-weight: bold; color: #8aa8bd; } #ddmenu li { display: block; position: relative; float: left; font-size: 1.45em; text-shadow: 1px 1px 0 #fff; border-right: 1px solid #dae0e5; } #ddmenu li a { display: block; float: left; padding: 0 12px; line-height: 78px; font-weight: bold; text-decoration: none; color: #6c87c0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } #ddmenu li:hover > a { color: #7180a0; background: #d9e2ee; } #ddmenu ul { position: absolute; top: 88px; width: 130px; background: #fff; display: none; margin: 0; padding: 7px 0; list-style: none; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }

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

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

#ddmenu ul:after { content: ""; width: 0; height: 0; position: absolute; bottom: 100%; left: 8px; border-width: 0 8px 8px 8px; border-style: solid; border-color: #fff transparent; } #ddmenu ul:before { content: ""; width: 0; height: 0; position: absolute; bottom: 100%; left: 4px; border-width: 0 10px 10px 10px; border-style: solid; border-color: rgba(0, 0, 0, 0.1) transparent; } #ddmenu ul li { display: block; width: 100%; font-size: 0.9em; text-shadow: 1px 1px 0 #fff; } #ddmenu ul li a { display: block; width: 100%; padding: 6px 7px; line-height: 1.4em; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } #ddmenu ul li a:hover { background: #e9edf3; }

JavaScript

$(document).ready(function(){ $("a").on("click", function(e){ e.preventDefault(); }); $("#ddmenu li").hover(function () { clearTimeout($.data(this,"timer")); $("ul",this).stop(true,true).slideDown(200); }, function () { $.data(this,"timer", setTimeout($.proxy(function() { $("ul",this).stop(true,true).slideUp(200); }, this), 100)); }); });

Первая часть кода перехватывает нажатия на ссылках и останавливает их обработку по умолчанию (загрузка страниц по адресу URL).

Вторая часть кода совершает все магические действия. Мы присоединяем обработчик события для процесса наведения курсора мыши на пункт списка. Обработчик будет останавливать текущую активную анимацию и выводить новый подпункт с помощью .slideDown() . Также устанавливаем небольшую задержку, чтобы реагировать только на действительный выбор пункта.