Вертикальное выпадающее меню jquery. Выпадающее меню на jQuery. jQuery плагин «MobilyBlocks» для отображения кругового меню
Для того, чтобы самому написать навигацию в виде вертикального выпадающего меню на 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)
Если все такие пункты разместить друг под другом, то возможно меню станет таким большим, что его высота, превысит высоту основного контента. Со стороны это будет не очень красиво, к тому же в таком сплошном списке тяжело что-то найти. Чтобы все сгруппировать и уменьшить, нужно сделать такую вещь как раздвижное меню.
Принцип раздвижного меню в том, что пункты меню разбиваются на группы, и эти группы скрываются, видно только название группы. При нажатии на название, выезжает список из определенного количества пунктов.
Как сделать раздвижное меню? В этом нам поможет - jQuery . С помощью него, все будет работать плавно и красиво, как в примере выше. Приступим к реализации раздвижного меню и выполним несколько пунктов.
jQuery скриптКак и обычно, при работе с jQuery, нужно подключить его библиотеку. Все как обычно, в шапке или подвале осуществляем подключение, если конечно, Вы этого не делали раньше, для других скриптов.
После библиотеки добавляем скрипт. который будет совершать анимацию.Скриптов будет 3, каждый из них по разному совершает анимацию.
$(document).ready(function() { $("#menu ul").hide(); $("#menu li span").click(function() { $("#menu ul:visible").slideUp("normal"); if (($(this).next().is("ul")) && (!$(this).next().is(":visible"))) { $(this).next().slideDown("normal"); } }); });
Данный скрипт работает так, что при нажатии на название категории выдвигается список, но при нажатии на другую категорию, она начинает раскрываться, в то время как первая закрывается. То есть открыта всегда только одна категория. Если Вам нужно, чтобы открытые категории не закрывались автоматически , то замените скрипт на новый, указанный ниже.
$(document).ready(function() { $("#menu ul").hide(); $("#menu li span").click(function() { $(this).next().slideToggle("normal"); }); });
Есть еще один скрипт, на который Вы можете заменить основной. Его фишка в том, что выдвижение меню при наведении происходит. Не нужно щелкать мышью, просто наведите курсор на название категории и все. Так что Выбирайте какой именно скрипт, более всего подходит Вам.
$(document).ready(function() { $("#menu ul").hide(); $("#menu li").hover(function() { $(this).children("ul").slideToggle("normal"); }); });
HTML разметкаТеперь, в нужном месте на Вашем сайте, нужно вывести HTML -разметки. Ну или немного переделать свою, чтобы она стала похожей как в примере.
Сложного ничего нет, все организовано с помощью - ul -списков.
CSS стилиНу и напоследок, чтобы задать корректный вид нашему меню, надо прописать стили. Если Вы не впервые работаете с CSS , то сможете с легкостью настроить стили под себя.
Ul#menu, ul#menu ul{ list-style:none; margin: 0px; padding: 0px; width: 250px; -webkit-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2); -moz-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2); box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.2);} ul#menu a,ul#menu span{display: block; text-decoration: none;} ul#menu li {margin-top: 1px;} ul#menu li a,ul#menu li span{ background: #1ba600; color: #fff; padding: 7px;} ul#menu li a:hover,ul#menu li span:hover{background: #333;} ul#menu li ul li a{ background: #eee; color: #000; padding-left: 20px;} ul#menu li ul li a:hover{background: #ddd;}
Больше ничего не нужно. Данный способ не очень сложный и имеет несколько видов реализации, все зависит от выбранного Вами скрипта.
На этом все, спасибо за внимание. 🙂
Очень часто в шаблонах можно встретить выпадающие навигационные элементы. Разработчики используют данный тип скрытых меню для вывода дополнительных скрытых ссылок, тематически связанных с основным пунктом. Можно найти примеры выскальзывающих панелей или различных меню в стиле аккордеона, которые реализуют такой принцип навигации.
Но в данном уроке мы построим простое выпадающее меню с использованием jQuery. Оно будет работать с помощью метода анимации для генерирования задержанных эффектов. Вместе с кодом JavaScript также применяются эффекты переходов CSS3. В результате получается заготовка для навигации сайта.
HTMLСначала построим основной шаблон HTML5. Потребуется последняя версия jQuery , которую мы получаем из API Google. Также добавляем файл стилей styles.css , который будет представлен ниже:
Горизонтальная навигационная панель | Материалы сайта сайт
Теперь рассмотрим структуру, которая построена на основе неупорядоченного списка в верху страницы. Весь список помещается в элемент HTML5 для лучших результатов SEO.
Структура кода достаточно простая. Каждый пункт списка включает эффект выделения, когда курсор мыши находится в нем. Все внутренние элементы 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() . Также устанавливаем небольшую задержку, чтобы реагировать только на действительный выбор пункта.
Получив несколько просьб, я решил написать статью о том, как можно сделать выпадающее меню. Самый лучший и простой способ создать такое меню - это положиться на 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 и 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 .
