Выпадающее JQuery меню

Опубликовал: admin

Автор: Afraz Shahid

16 Июня 2011

Теги: CSS, HTML, JQuery, меню

В статье приведен пример создания выпадающего JQuery меню с эффектами анимации переходов.

Подготовка графики

Для данного примера у нас имеется готовый PSD файл, который мы и будем использовать для нашего меню. Ниже приведен снимок того, как мы будем нарезать наш PSD.

PSD файл меню

Структура HTML

Как вы уже заметили в PSD есть пункты меню и одна строка поиска с правой стороны. Ниже приведет HTML код для всех элементов меню.

<div class="main-navigation">
   <ul>
      <li><a href="#">Home</a>
         <ul>
           <li><a href="#">Sub Menu Item 1</a></li>
            <li><a href="#">Sub Menu Item 2</a></li>
            <li><a href="#">Sub Menu Item 3</a></li>
            <li><a href="#">Sub Menu Item 4</a></li>
            <li><a href="#">Sub Menu Item 5</a></li>
       </ul>
      </li>
      <li><a href="#">Services</a>
        <ul>
            <li><a href="#">Sub Menu Item 1</a></li>
            <li><a href="#">Sub Menu Item 2</a></li>
            <li><a href="#">Sub Menu Item 3</a></li>
            <li><a href="#">Sub Menu Item 4</a></li>
            <li><a href="#">Sub Menu Item 5</a></li>
         </ul>
      </li>
      <li><a href="#">Portfolio</a>
         <ul>
            <li><a href="#">Sub Menu Item 1</a></li>
            <li><a href="#">Sub Menu Item 2</a></li>
            <li><a href="#">Sub Menu Item 3</a></li>
            <li><a href="#">Sub Menu Item 4</a></li>
            <li><a href="#">Sub Menu Item 5</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a>
         <ul>
            <li><a href="#">Sub Menu Item 1</a></li>
            <li><a href="#">Sub Menu Item 2</a></li>
            <li><a href="#">Sub Menu Item 3</a></li>
            <li><a href="#">Sub Menu Item 4</a></li>
            <li><a href="#">Sub Menu Item 5</a></li>
         </ul>
      </li>
   </ul>
   <div class="search">
      <input type="text" name="search" class="search-input" />
      <input type="submit" name="search" value="" class="search-btn" />
   </div>
</div>

Учитывайте то, что данное меню лищь пример и может быть модифицированно под ваши требования. Подменю, также добавлено для примера и может быть размещено в любом пункте.

CSS

Ниже приведен CSS код для форматирования меню. Примените стили и смотрите результаты в браузере.

.main-navigation{
   width:890px;
height:44px;
border:1px dashed #a2d2cf;
background:url(../images/nav-bg.jpg) left repeat-x;
top:50%;
left:50%;
margin:-22px 0 0 -445px;
position:absolute;
}
ul{
margin:0px;
padding:0px;
list-style:none;
}
li{
float:left;
font-size:15px;
color:#FFFFFF;
height:42px;
display:block;
position:relative;
}
li .hover{
color:#FFFFFF;
text-decoration:none;
position:absolute;
background:url(../images/hover-bg.png) top left no-repeat;
top:0;
left:0;
z-index:0;
height:44px;
display:none;
}
li a{
display:block;
color:#FFFFFF;
text-decoration:none;
padding:14px 43px 13px 44px;
z-index:1000;
position:relative;
}
.search{
float:right;
margin:9px 26px 0 0;
   padding:0px;
}
.search-input{
font-family:LucidaGrande, Lucida Sans, Arial;
font-size:12px;
color:#FFFFFF;
width:117px;
height:26px;
padding:0 5px 0 10px;
padding:5px 5px 0 10px \9;/* IE 7 and 8 */
border:0;
outline:none;
background:url(../images/search-input-bg.png) top left no-repeat;
float:left;
}
.search-btn{
width:37px;
   height:26px;
border:0;
outline:none;
background:url(../images/search-btn.png) top left no-repeat;
float:left;
}
ul li ul{
width:200px;
position:absolute;
display:none;
top:44px;
padding:1px 0 0 0;
}
ul li:hover ul{
   display:block;
}
ul li ul li{
display:block;
padding:10px 10px 10px 0;
width:200px;
padding:0px;
margin:0px;
background:url(../images/nav-bg.jpg) left repeat-x;
position:relative;
}
ul li ul li a{
display:block;
color:#FFFFFF;
text-decoration:none;
padding:14px 43px 13px 28px;
z-index:1000;
position:relative;
}

Теперь вы можете рассмотреть готовый вариант меню с окном поиска.

Дальше подключаем функционал jQuery, чтобы применить некоторые эффекты для нашего меню.

готовый CSS вариант меню

jQuery

Теперь собственно основная часть. Установите нижеприведенный код в шапку вашей страницы (блок head).

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

После этого нам необходимо добавить функции обработки событий наведения курсора мыши (аналог mouseover и mouseout).

$("li").hover(function() {
//Данная функция сработает при наведении курсора мыши на любой элемент li.
} , function() {
//Данная функция сработает когда курсор мыши будет убран с любого элемента li.
});

Основная функция готова. Добавим переходы для меню.

var itemwidth = $(this).width(); /* Получение ширины элемента LI */
$(this).prepend("<div class='hover'></div>"); /* Вставка пустого div в li элемент, перед тегом <a> */
$(this).find("div").fadeIn('10000').css({'width' : itemwidth}); /* Используем itemwidth для корректного отображения div */
$(this).find("ul").fadeIn('1000').slideDown('10000').css("display", "block");

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

Теперь нам необходимо добавить функцию для второго случай (когда курсор будет убран с элемента). Удалите комментарий и поместите вместо него следующий код:

$(this).find("div").slideUp('1000').fadeOut('1000'); /* появление и исчезание при наведении на div */
$(this).find("div").remove(); /* удаление блока <div> из html кода при каждом действии mouseout */
$(this).find("ul").fadeOut('1000'); /* исчезание подменю */

Если вы проверите меню, то увидите что оно уже работает вместе с эффектами. Далее необходимо доработать эффекты окна поиска.

Для этого создадим две функции Focus и Focus out:

$(".search-input").focus(function(){
$(this).animate({width:'180px'}, 500); /* при получении фокуса, ширина элемента будет увеличена в лево */
});
$(".search-input").focusout(function(){
$(this).animate({width:'117px'}, 500); /* при потере фокуса, ширина элемента примет значение по-умолчанию */
});

На этом наше меню закончено и готово к работе.

Скачать исходные файлы
Посмотреть демо-версию

Только авторизованные пользователи могут участвовать в голосовании

298