Рубрики
Меню

Создаем анимированное выпадающее меню на 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 ответа к “Создаем анимированное выпадающее меню на jQuery”

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

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

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