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

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

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

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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>

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Как видно, под каждым родительским тэгом 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.