Создаем анимированное выпадающее меню на jQuery

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

Этим же целям служит мое руководство по созданию красивого выпадающего меню для сайта, то которое, может быть, вы ищите. В процессе написания руководства я не буду объяснять HTML и CSS, я предполагаю, что вы уже знаете эти технологии на достаточном уровне для нашего урока, в противном случае вы можете скопировать необходимый HTML и CSS код ниже.

Нарезка PSD

У нас есть бесплатный PSD файл с нарисованным меню, который мы будем использовать в данном руководстве (сам файл вы можете скачать в конце руководства). Ниже на картинке изображено как мы будем нарезать графику.

HTML структура:

В PSD файле вы видели пункты меню с строкой поиска с правого края, необходимый HTML код для всех этих элементов представлен ниже:

<div>
    <ul>
        <li><a href="#">Главная</a>

            <ul style="display: none;">
                <li><a href="#">Подменю пункт 1</a></li>
                <li><a href="#">Подменю пункт 2</a></li>
                <li><a href="#">Подменю пункт 3</a></li>
                <li><a href="#">Подменю пункт 4</a></li>
                <li><a href="#">Подменю пункт 5</a></li>

            </ul>

        </li>
        <li><a href="#">Услуги</a>

            <ul style="display: none;">
                <li><a href="#">Подменю пункт 1</a></li>
                <li><a href="#">Подменю пункт 2</a></li>
                <li><a href="#">Подменю пункт 3</a></li>
                <li><a href="#">Подменю пункт 4</a></li>
                <li><a href="#">Подменю пункт 5</a></li>

            </ul>

        </li>
        <li><a href="#">Продукция</a>

            <ul style="display: none;">
                <li><a href="#">Подменю пункт 1</a></li>
                <li><a href="#">Подменю пункт 2</a></li>
                <li><a href="#">Подменю пункт 3</a></li>
                <li><a href="#">Подменю пункт 4</a></li>
                <li><a href="#">Подменю пункт 5</a></li>

            </ul>

        </li>
        <li><a href="#">Контакты</a>

            <ul style="display: none;">
                <li><a href="#">Подменю пункт 1</a></li>
                <li><a href="#">Подменю пункт 2</a></li>
                <li><a href="#">Подменю пункт 3</a></li>
                <li><a href="#">Подменю пункт 4</a></li>
                <li><a href="#">Подменю пункт 5</a></li>
            </ul>
        </li>
    </ul>

    <div>
        <input name="search" type="text">
        <input name="search" value="" type="submit">
    </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

Основная часть урока начинается, тут я буду вас учить как шаг за шагом создать анимированное выпадающее меню на jQuery.

Шаг 1 — Перейдите в секцию head страницы и вставьте в следующий код:

<script type="text/javascript" src=" http://yandex.st/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

});
</script>

Первое что мы делаем в этом коде, это подключаем jQuery на нашу страницу с Yandex. И подписываемся на событие готовности документа, весь наш код для меню мы будем писать в обработчике события готовности документа.

Шаг 2 — В код обработчика готовности документа добавьте следующий код:

$("li").hover(function() {
    /* эта функция будет вызываться при наступления события HOVER (наведении курсора на элемент) на любом li */
} , function() {
    /* эта функция будет вызываться при наступлении события HOVER OUT (по кидание элемента курсором) на любом li */
});

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

Шаг 3 — Добавляем эффекты.

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

Добавьте в функцию обработки события HOVER код представленный выше, после это наш общий код должен выглядеть примерно так:

$(document).ready(function () {

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

});

Далее мы будем работать над кодом для функции обработки события HOVER OUT, в ставьте в нее код представленный ниже:

$(this).find("div").slideUp('1000').fadeOut('1000');
/* применяем эффекты silde up и fade out для div */
$(this).find("div").remove();
/* удяляем div */
$(this).find("ul").fadeOut('1000');
/* применяем эффект fadе out к подменю */

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

Шаг 4 — Анимации поля поиска

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

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

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

На этом ваше анимированное выпадающее меню и анимированное поле поиска на jQuery готовы.

Заключение

Существуют тысячи плагинов для jQuery для того что бы создать подобное меню, но цель этого руководства состоит в том, чтобы дать вам подробный пример по созданию выпадающего меню и кратко познакомить вас с тем как работает jQuery и как создавать анимацию с jQuery.

Я надеюсь, что вам понравилось меню.

Используемый PSD | Демонстрация меню

2 комментария

  1. Валентин:

    Большое спасибо,долго ковырялся,писал свою менюшку,работала некорректно,а ваш способ подсказал мне,укак оказывается это по правильному делается,большон СПАСИБО!

  2. серега:

    все хорошо, только в IE fade работает коряво….

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *