Выпадающее меню jquery. Вертикальное раздвижное меню на jQuery (гармошка, аккордеон). Плагин «Animated Content Menu»
Получив несколько просьб, я решил написать статью о том, как можно сделать выпадающее меню. Самый лучший и простой способ создать такое меню - это положиться на 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- классика, статей на эту тему написано масса. Я же попробовал чуть усложнить задачу, добавив возможность оставаться разделам меню открытыми (или закрытыми, в зависимости от выбора пользователя) при перемещении по сайту.
Для решения этой задачи я решил воспользоваться плагином JQuery Cookie . Преимущество данного плагина в том, что операция совершается на стороне клиента, что, в свою очередь, уменьшает нагрузку на сервер. Минус- если у пользователя отключен JS, плагин не сработает. Но данный вариант я не рассматриваю, так как тогда пропадает вообще весь смысл выпадающего меню. Итак, начнем.
Для начала нам необходимо подключить сам фреймворк JQuery и плагин JQuery Cookie:
Код: HTML
Далее- разметка. Выглядеть она будет как простой список, ничего сверхъестественного. Единственное замечу, что в теге должен находится заголовок, при клике на который будет выпадать меню:
Код: HTML
Первый заголовок
- Первая ссылка
- Вторая ссылка
- Третья ссылка
Второй заголовок
- Первая ссылка
- Вторая ссылка
- Третья ссылка
Третий заголовок
- Первая ссылка
- Вторая ссылка
- Третья ссылка
Четвертый заголовок
- Первая ссылка
- Вторая ссылка
- Третья ссылка
Ну и так до бесконечности. Теперь- самое интересное. В коде добавлю немного комментариев, дабы было примерно понятно, чопачом
Код: JS
$(document).ready(function(){
if($.cookie("num_open_ul")){ // проверили, есть ли запись в печеньках
if($.cookie("num_open_ul") != 0){ // и эта запись не равна 0
var number_eq = parseInt($.cookie("num_open_ul")-1);
$(".navigation_body").eq(number_eq).show().prevAll("#navigation h2.navigation_head:first").addClass("active_navigation");
}
};
$("#navigation h2.navigation_head").click(function(){ // при клике сработает эта функция
if(!$(this).next().is(":visible")){
$("div.navigation_body").siblings("div.navigation_body").slideUp(500); // если другие открыты- закрыли все, кроме текущего
}
$(this).next("div.navigation_body").slideToggle(500).siblings("div.navigation_body").slideUp(500);
$(this).toggleClass("active_navigation").siblings("#navigation h2.navigation_head").removeClass("active_navigation"); // открытому добавили класс, чтобы сменить стиль
setTimeout(fncookie, 600); //сама запись в печеньки с задержкой, дабы скрипт до записи успел завершить работу (500мс- скорость, задержка- 600мс)
});
function fncookie(){ // сама функция записи
var number_open_ul = 0;
var i = 0;
$("div.navigation_body").each(function(){
i++;
if($(this).is(":visible")){
number_open_ul = i;
}
$.cookie("num_open_ul", number_open_ul, {expires:3, path:"/"}); // хранить 3 дня для всего сайта.
});
}
});
То есть теперь, если пользователь открыл меню, ушел с сайта и зашел на него снова через пару дней, меню все так же для него будет оставаться открытым.
Ну и напоследок у нас остался небольшой штрих: собственно, css- стили. Вы уж делайте на свой вкус, в примере я взял готовый дизайн с одного из проектов
Код: CSS
#navigation {
margin: 80px auto;
width: 250px;
}
#navigation h2, #navigation h2.navigation_head {
font-size: 18px;
font-weight: bolder;
background-color: #ffb6c1;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ffe9e9),color-stop(100%,#ffb6c1));
background-image: -webkit-linear-gradient(#ffe9e9,#ffb6c1);
background-image: -moz-linear-gradient(#ffe9e9,#ffb6c1);
background-image: -o-linear-gradient(#ffe9e9,#ffb6c1);
background-image: linear-gradient(#ffe9e9,#ffb6c1);
padding: 5px 3px 6px 3px;
margin: auto;
position: relative;
}
#navigation h2.navigation_head:after {
position: absolute;
right: 5px;
color: #550000;
content: "cssb";
}
#navigation h2:hover, #navigation h2.navigation_head:hover {
cursor: pointer;
}
.active_navigation {
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ffb6c1),color-stop(100%,#ffe9e9)) !important;
background-image: -webkit-linear-gradient(#ffb6c1,#ffe9e9) !important;
background-image: -moz-linear-gradient(#ffb6c1,#ffe9e9) !important;
background-image: -o-linear-gradient(#ffb6c1,#ffe9e9) !important;
background-image: linear-gradient(#ffb6c1,#ffe9e9) !important;
}
.active_navigation:after {
position: absolute;
right: 5px;
content: "cssd" !important;
}
.navigation_body {
display:none;
}
#navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
}
* html #navigation ul li{
height: 1%;
}
#navigation div.navigation_body ul li {
margin-left: 10px;
}
#navigation a {
font-family: "Times New Roman";
display: block;
color: #918871;
padding: 3px;
background-color: #ffe3e0;
border-bottom: 1px solid #fff;
text-decoration: none;
}
#navigation a:hover {
color: #585858;
background-color: #ffb6cc;
}
Если кто обратил внимание, здесь я попробовал использовать свойство content: +/- при закрытом/ открытом меню, но вы можете добавить изображение или любую другую конструкцию. Посмотреть пример того, что у нас получилось, можно здесь
Как всегда, готов выслушать вопросы и попробовать ответить на них. Всего доброго, всех благ.
Для того, чтобы самому написать навигацию в виде вертикального выпадающего меню на 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 на то что будет у Вас, ну и возможно подправить еще что-то по мелочам. Подробно останавливаться не буду. Для каждого случая нужен персональный подход, так что уж извините 🙂
На этом все, спасибо за внимание. 🙂
В этой статье мы будем разрабатывать простенькое выпадающее меню при помощи jQuery. Для начала посмотрите на демо-файл. Надеемся, что вы хоть немного знаете основы jQuery и CSS. Ключевыми аспектами создания данного выпадающего меню заключаются в применении параметров CSS: position, top, left, z-index.
Используя эти параметры, мы можем быть уверены в том, что наше меню будет появляться точно под ссылкой, на которую был наведен курсор, и точно будет накрывать все остальные элементы. Мы также сделаем так, чтобы меню отображалось при наведении курсора, и исчезало тогда, когда курсор отведен в сторону. Для реализации данных событий, мы будем использовать функции jQuery: mouseenter и mouseleave. И это все, что нам понадобится для создания выпадающего меню!
Демо-файл финального результата и ссылка на скачивание
HTML-код
Ознакомьтесь с HTML-кодом выпадающего меню:
Как видно, здесь мы будем использовать неупорядоченные списки для реализации пунктов меню. Каждой ссылке меню присвоен класс выпадающего меню, а само выпадающее меню охвачено классом суб-ссылок. Имена классов будут использоваться jQuery для того, чтобы определять, какое меню нужно отображать.
CSS-код
Ознакомьтесь с кодом CSS:
/* CSS For Dropdown Menu Start */
ul
{
list-style:none;
padding:0px;
margin:0px
}
ul li
{
display:inline;
float:left;
}
ul li a
{
color:#ffffff;
background:#990E00;
margin-right:5px;
font-weight:bold;
font-size:12px;
font-family:verdana;
text-decoration:none;
display:block;
width:100px;
height:25px;
line-height:25px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #560E00;
}
ul li a:hover
{
color:#cccccc;
background:#560E00;
font-weight:bold;
text-decoration:none;
display:block;
width:100px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #000000;
}
ul li.sublinks a
{
color:#000000;
background:#f6f6f6;
border-bottom:1px solid #cccccc;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
margin-top:2px;
}
ul li.sublinks a:hover
{
color:#000000;
background:#FFEFC6;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
}
ul li.sublinks
{
display:none;
}
/* CSS For Dropdown Menu End */
Большая часть кода CSS используется для форматирования меню (вы можете придать внешний вид меню по собственному усмотрению), но здесь также есть некоторые важные моменты:
1 – Удаление знаков табуляции посредством list-style:none;
2 – Нам известно, что списки – это блочные элементы и всегда отображаются в вертикальном порядке. Для того, чтобы сделать расположить их горизонтально, мы придаем им параметр строчных элементов и выравниваем их по левой стороне с помощью кода:
Display:inline;
float:left;
3
– По умолчанию ссылки являются строчными элементами. Мы же переделываем их в блочные элементы при помощи display:block (таким образом, мы теперь можем задать им значение ширины).
4 – Прячем все меню посредством:
Ul li.sublinks
{
display:none;
}
jQuery
Представьте былые времена, когда выпадающие меню были реализованы посредством грубого кода javascript, к тому же там была нужна куча ненужного кода. Но сегодня все, что нам нужно, это jQuery:
$(function(){
Submenu.css({
position:"absolute",
zIndex:1000
});
Submenu.stop().slideDown(300);
$(this).slideUp(300);
});
});
});
Очень интересная и простая штука. Давайте мы вам объясним, как это работает. Для начала и как обычно, мы охватываем наш код в контроллер jQuery:
$(function(){
...
});
Наш код активизируется, когда курсор мыши будет наведен (функция mouseenter) на элемент, которому присвоен класс выпадающего меню ($(".dropdown")). В нашем случае это ссылка в меню:
$(function(){
$(".dropdown").mouseenter(function(){
........
});
});
Давайте убедимся, что мы спрятали (hide()) все предыдущие открытые меню до того, как курсор мыши перескочит на следующую ссылку:
$(".sublinks").stop(false, true).hide();
Обратите внимание на функцию остановки, которая помогает нам отобразить только одно выпадающее меню в момент, когда курсор мыши переходит по разным ссылкам в меню. Если мы не воспользуемся данной функцией, то каждое выпадающее меню так и останется открытым вплоть до того момента, пока мы полностью не уведем курсор мыши с меню. Это будет создавать некоторые накладки, поэтому нам следует избегать этого. Далее мы берем текущее раскрытое выпадающее меню и назначаем переменную:
Var submenu = $(this).parent().next();
Вот что будет в коде HTML:
Когда курсор мыши наведен на ссылку с классом dropdown, мы двигаемся обратно при помощи parent() и останавливаемся на "li", а далее при помощи next(), мы оказываемся на нужном выпадающем меню, а "li" уже будет с классом суб-ссылок (sublinks). Таким образом, jQuery облегчает нам процесс поиска того, какое выпадающее меню отображать, когда курсор мыши наведен на определенную ссылку.
Submenu.css({
position:"absolute",
top: $(this).offset().top + $(this).height() + "px",
left: $(this).offset().left + "px",
zIndex:1000
});
Код очень важен, так как он гарантирует нам то, что выпадающее меню отображается точно под определенной ссылкой. Если позиция выставлена на absolute, мы можем позиционировать элемент в любой области нашей страницы. Далее мы определяем верхнюю позицию ссылки, на которую наведен курсор при помощи $(this).offset().top (это относится к текущему пункту меню, на который наведен курсор), и добавляем к нему такое значение height, чтобы меню отображалось точно под ссылкой. Нечто похожее проделываем и с параметром left. Затем мы используем z-index для того, чтобы быть уверенными, что наше меню будет отображено поверх остальных элементов.
Submenu.stop().slideDown(300);
Конечно, вы можете использовать и другие варианты анимации типа fadeIn, анимацию с помощью собственных стилей и так далее.
Теперь нужно отвлечься от концепции отображения выпадающего меню, и заставить его прятаться. Нам потребуется вот такой отрывок кода:
Submenu.mouseleave(function(){
$(this).slideUp(300);
});
Для того чтобы спрятать выпадающее меню, мы используем slideUp, антоним к slideDown. Учитывайте то, что submenu – это переменная, которую мы создали для определения конкретного выпадающего меню.
Таким образом, у нас получилось привлекательное одноуровневое выпадающее меню на jQuery .