Создаём горизонтальное выпадающее меню на jQuery

Дата публикации: 2011-04-20

горизонтальное меню jquery

От автора: Выпадающее меню хорошо подходит для скрытия навигационных ссылок, когда они вам не нужны. Оно помогает сделать страницу аккуратной и простой в вопросе навигации. Оно улучшает, кроме того, впечатление пользователя, когда тот пытается определить местонахождение определенной информации внутри веб-сайта. Существует множество способов создания выпадающего меню на jQuery и много разных их видов. Если вы заметили, вертикальное выпадающее меню чаще используется в сравнении с горизонтальным.

В этой статье я покажу, как создать простое горизонтальное выпадающее меню.

горизонтальное меню jquery

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

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

1. Фоновое изображение для навигации

Мы начнем с кадрирования фонового изображения, выберем всю высоту фона навигации, а на ширину нам отлично хватит 5 пикселей, чтобы сделать CSS repeat-x.

горизонтальное меню jquery

2. Правое пунктирное обрамление

Для основного и выпадающего меню оба правых пунктирных обрамления не одинаковы, так что нам нужно обрезать обе пунктирные окантовки и сохранить их как изображение.

горизонтальное меню jquery

3. Создаем разметку HTML

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

<ul id="ddmenu">
 <li><a href="#">Services</a>
 <ul>
 <li><a href="#">Panel Beating</a></li>
 <li><a href="#">Insurance Claim</a></li>
 <li><a href="#">Spray Painting</a></li>
 <li><a href="#">Engine Servicing</a></li>
 <li><a href="#">Car Inspection</a></li>
 </ul>
 
 </li>
 <li><a href="#">Gallery</a>
 <ul>
 <li><a href="#">Work Place</a></li>
 <li><a href="#">Our Cars</a></li>
 <li><a href="#">Our Staff</a></li>
 <li><a href="#">Special Events</a></li>
 </ul>
 </li>
 <li><a href="#">Contact Us</a>
 <ul>
 <li><a href="#">Enquiry</a></li>
 <li><a href="#">Feedback</a></li>
 </ul>
 </li>
 <li><a href="#">Home</a></li>
</ul>

<li><a href="#">Services</a>

<ul>

<li><a href="#">Panel Beating</a></li>

<li><a href="#">Insurance Claim</a></li>

<li><a href="#">Spray Painting</a></li>

<li><a href="#">Engine Servicing</a></li>

<li><a href="#">Car Inspection</a></li>

</ul>

</li>

<li><a href="#">Gallery</a>

<ul>

<li><a href="#">Work Place</a></li>

<li><a href="#">Our Staff</a></li>

<li><a href="#">Special Events</a></li>

</ul>

</li>

<li><a href="#">Contact Us</a>

<ul>

<li><a href="#">Enquiry</a></li>

<li><a href="#">Feedback</a></li>

</ul>

</li>

</ul>

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Как видно, под каждым родительским тэгом li содержится список подтэгов li, которые станут списком выпадающих ссылок.

4. Выпадающее меню jQuery

Теперь разметка HTML готова и мы перейдем к jQuery. Для этого учебника я использую плагин jQuery Simple Drop Down Menu Plugin из массива JavaScript.

// <![CDATA[
 var timeout = 500;
 var closetimer = 0;
 var ddmenuitem = 0;
 
 function ddmenu_open(){
 ddmenu_canceltimer();
 ddmenu_close();
 ddmenuitem = $(this).find('ul').css('visibility', 'visible');
 }
 
 function ddmenu_close(){
 if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
 }
 
 function ddmenu_timer(){
 closetimer = window.setTimeout(ddmenu_close, timeout);
 }
 
 function ddmenu_canceltimer(){
 if(closetimer){
 window.clearTimeout(closetimer);
 closetimer = null;
 }}
 
 $(document).ready(function(){
 $('#ddmenu > li').bind('mouseover', ddmenu_open)
 $('#ddmenu > li').bind('mouseout',  ddmenu_timer)
 });
 
 document.onclick = ddmenu_close;
// ]]>

// <![CDATA[

var timeout = 500;

var closetimer = 0;

var ddmenuitem = 0;

function ddmenu_open(){

ddmenu_canceltimer();

ddmenu_close();

ddmenuitem = $(this).find('ul').css('visibility', 'visible');

}

function ddmenu_close(){

if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');

}

function ddmenu_timer(){

closetimer = window.setTimeout(ddmenu_close, timeout);

}

function ddmenu_canceltimer(){

if(closetimer){

window.clearTimeout(closetimer);

closetimer = null;

}}

$(document).ready(function(){

$('#ddmenu > li').bind('mouseover', ddmenu_open)

$('#ddmenu > li').bind('mouseout', ddmenu_timer)

});

document.onclick = ddmenu_close;

// ]]>

5. CSS для горизонтального выпадающего меню

Наконец мы добрались до CSS своего меню. В массиве JavaScript плагин демонстрирует вертикальное выпадающее меню, а нам придется модифицировать CSS для того, чтобы сделать горизонтальное выпадающее меню.

/*Drop Down Menu Styles*/
#ddmenu {
 background:url(images/menubg.gif) repeat-x;
 margin: 0;
 padding: 0;
 height:43px;
 width:700px;
}
 
#ddmenu li {
 float: left;
 list-style: none;
 font: 11px Tahoma, Arial;
}
 
#ddmenu li a {
 background:url(images/top-dotted.gif) right no-repeat;
 display: block;
 padding: 5px 12px;
 text-decoration: none;
 width: 70px;
 color: #fff;
 text-transform:uppercase;
 white-space: nowrap;
 text-align:center;
}
 
#ddmenu li a:hover {
 background: #000 url(images/top-dotted.gif) right no-repeat;
}
 
#ddmenu li ul {
 margin: 3px 0 0 10px;
 padding: 0;
 position: absolute;
 visibility: hidden;
 width:600px;
}
 
#ddmenu li ul li {
 display:inline;
}
 
#ddmenu li ul li a {
 width: auto;
 background: url(images/bottom-dotted.gif) right no-repeat;
 display: inline;
 color: #d9d9d9;
 font-size: 10px;
 padding: 2px 10px;
}
 
#ddmenu li ul li a:hover {
 background: #000 url(images/bottom-dotted.gif) right no-repeat;
 padding: 2px 10px;
}

/*Drop Down Menu Styles*/

#ddmenu {

background:url(images/menubg.gif) repeat-x;

margin: 0;

padding: 0;

height:43px;

width:700px;

}

#ddmenu li {

float: left;

list-style: none;

font: 11px Tahoma, Arial;

}

#ddmenu li a {

background:url(images/top-dotted.gif) right no-repeat;

display: block;

padding: 5px 12px;

text-decoration: none;

width: 70px;

color: #fff;

text-transform:uppercase;

white-space: nowrap;

text-align:center;

}

#ddmenu li a:hover {

background: #000 url(images/top-dotted.gif) right no-repeat;

}

#ddmenu li ul {

margin: 3px 0 0 10px;

padding: 0;

position: absolute;

visibility: hidden;

width:600px;

}

#ddmenu li ul li {

display:inline;

}

#ddmenu li ul li a {

width: auto;

background: url(images/bottom-dotted.gif) right no-repeat;

display: inline;

color: #d9d9d9;

font-size: 10px;

padding: 2px 10px;

}

#ddmenu li ul li a:hover {

background: #000 url(images/bottom-dotted.gif) right no-repeat;

padding: 2px 10px;

}

В конце концов, из CSS массива JavaScript вы всего-навсего убрали float:none; из #ddmenu li ul li, так что будет применено свободное перемещение float, и добавили display: inline; в #ddmenu li ul li a, чтобы каждый li был встроен.

Важный момент, который следует взять на заметку: для того, чтобы это горизонтальное выпадающее меню на jQuery работало правильно в Internet Explorer 6 (IE 6), вам придется установить фиксированную ширину для #ddmenu li ul, чтобы неупорядоченный список был достаточной ширины для поддержки горизонтального выпадающего списка в IE 6.