—»     —»   Разрабатываем анимированное меню навигации с помощью jQuery
  Раздел: Меню и Навигация   Нет комментариев  

Разрабатываем анимированное меню навигации с помощью jQuery

Предпросмотр:

Разрабатываем анимированное меню навигации с помощью jQuery

Смею предположить, что наши читатели достаточно подкованы в HTML и CSS.

Код HTML:

<div class="container">
    <div id="navbar1">
           <ul id="sprite">
               <li id="b0" class="a0">Home</li>
                <li id="b1">News</li>
                <li id="b2">Blog</li>
                <li id="b3">Pictures</li>
                <li id="b4">Videos</li>
                <li id="b5">Gallery</li>
                <li id="b6">About</li>
                <li id="b7" style="border-right:1px solid #1f1f1f;">Contact</li>
            </ul>
        </div>
</div>

Код CSS:

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
body{
background-color:#1f1f1f;
}
.container{
    width:960px;
    margin:0px auto;
    color:#FFFFFF;
    font-family:Arial,sans-serif;
    font-size:20px;
    font-weight:bold;
}
#navbar1{
    float:left;
    width:960px;
    height:36px;
    font-size:14px;
    margin:20px 0 0 0;
    background:url(images/navbar_bg.png);
}
#navbar1 ul{
    float:left;
    width:585px;
    height:36px;
    margin-left:188px;
    color:#000000;
}
#navbar1 ul{
    background: url(images/anim_3.png) no-repeat;
    background-position:1px 4px;
}
#navbar1 ul li{
    float:left;
    width:72px;
    margin:3px 0 0 0;
    height:22px;
    display: inline;
    text-align:center;
    padding:7px 0 0 0;
    border-left:1px solid #1f1f1f;
    cursor:pointer;
}

*Заметка: Данная статья хорошо подойдет в тех случаях, когда у вас уже есть заранее обозначенная ширина каждой кнопки или элемента списка, как показано на изображении выше. Можно это использовать также и в навигациях с динамичной шириной, но вам придется менять jQuery, и само изображение, дабы достичь нужной консистенции в дизайне. Для того, чтобы объяснить вам основную суть того, как мы собираемся анимировать навигационную строку, мы возьмем фоновое изображение, равное по ширине пункту меню. Оно будет размещаться с левой стороны каждого пункта при наведении курсора. Итак, как вы видите в коде HTML, я присвоил имя (id) своему списку имя «sprite» с фоновым изображением. Я также дал имена пунктам в меню b0, b1, b2, b3 и так далее, опираясь на очередность отображения пунктов. Я объясню, для чего мы это делаем, после того, как вы взглянете на код jQuery.

Код jQuery:

$(document).ready(function(){
    var selected=0; // Default background position
    var position=0;

    $("#sprite").css({backgroundPosition:''+selected+'px 4px'});

    $("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseover(function(){
    position=$(this).attr("id").slice(1,2)*($(this).outerWidth());
    /*width of your list item*/
    $("#sprite").stop().animate({backgroundPosition:''+position+'px 4px'},{duration:200});
    });

    $("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseout(function(){
    $("#sprite").stop().animate({backgroundPosition:''+selected+'px 4px'},{duration:200});
    });
});

Шаг за шагом прочтите это:

* В первой строке вы указываете расположение фонового изображения, которое входит в спрайт (#sprite). Даже несмотря на то, что мы уже указали стандартное фоновое изображение в CSS-файле, нам все равно приходится указывать стандартные изображения в jQuery. Это делается только из-за того, что Internet Explorer отображает ошибку после повторного наведения курсора мыши.

* Теперь, при наведении курсора на любой из пунктов меню, мы просто просчитываем фоновое расположение изображения в фоне спрайта, и применив метод анимации в jQuery, передвигаем его в указанное место. Например: При наведении на b0, в нашем случае мы передвигаем его 0 * 73 (ширина заданной кнопки), т.е. 0 пикселей от левого спрайта. При наведении мыши на b1, мы передвигает его 1 * 73, т.е., 73 пикселя от левого спрайта. При наведении на b2, передвигаем его на 2 * 73, т.е., 146 пикселей от левого спрайта, и так далее. Именно поэтому мы переименовали пункты меню в b0, b1, b2… чтобы можно было делить их цифровые значения.

* Когда курсор выходит из поля навигационного меню, изображение вновь возвращается на исходную позицию, т.е. 0 пикселей (var selected;) слева и 4 пикселя сверху.

* Теперь, если у вас уже есть то, о чем мы вам рассказывали, то у вас, вероятно, может возникнуть один вопрос, о том, должны ли вы вручную задавать значения переменной «selected» для каждой страницы. Во избежание данных повторений, вам просто нужно отредактировать код jQuery, предоставленный выше, на вот этот.

<script type="text/javascript">
$(document).ready(function(){
    var check;
    var i;
    for(i=0;i<20;i++){
        if($(".a"+i+"").attr("id")){
        check=$(".a"+i+"").attr("id").slice(1,2);
        }
    }

    var selected=check*($("#b0").outerWidth());
    var position;

    $("#sprite").css({backgroundPosition:''+selected+'px 4px'});

    $("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseover(function(){
    position=$(this).attr("id").slice(1,2)*($("#b0").outerWidth());/*width of your list item*/
    $("#sprite").stop().animate({backgroundPosition:''+position+'px 4px'},{duration:300});
    });

    $("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseout(function(){
    $("#sprite").stop().animate({backgroundPosition:''+selected+'px 4px'},{duration:300});
    });
});

</script>

Теперь мы можем просто называть класс а0, или а1, или а2, или а4 из нашего списка (активный пункт меню) для того, чтобы в HTML установить исходную позицию фонового изображения в спрайте, а скрипт будет искать класс с префиксом «а», а затем переходить к следующим элементам, т.е. 0 или 1 или 2 или 3, и так далее. А затем будет умножать ее на ширину элементов, и задавать исходную позицию слева.

Не стесняйтесь комментировать статью, если она вам понравилась, или возможно у вас возникли какие-то проблемы в процессе применения методов, описанных в ней.

Спасибо за внимание.

Скачать рабочий пример и исходный код:
anim_navbar_webmuch.zip [9,8 Kb] (cкачиваний: 256)
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Mysterious Master   Прочитано (раз): 7524   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031