Очередной блог фрилансера

коротко и полезно о веб-разработке

Menu
  • О чем это все
Menu

Создание навигации “волшебная линия” с помощью jQuery

14.02.201022.11.2011

Такой “скользящий” стиль навигации существует довольно давно, мне всего лишь было нужно изменить его немного под собственные нужды, поскольку появилась такая возможность. Это оказалось очень легко. Можете взглянуть на два примера такой навигации на демонстрационной странице.

Идея

Идея состоит в наличие какой-либо подсветки (фонового изображения или подчеркивания), следующей за мышью, при наведении к какому-либо пункту меню. Это реализуется с помощью анимации jQuery. Следовательно, “волшебную линию” можно добавить только с помощью JavaScript. После того, как линия будет добавлена и стилизована, при движении мыши к любому пункту меню, ее ширина и левое позиционирование будет изменятся с анимационным эффектом.

HTML

Здесь обычный маркированный список. Ему назначен класс “group”, так как в примере будет использовано два горизонтальных меню. ID используется для указания элемента JavaScript.

<div class="nav-wrap">
 <ul class="group" id="example-one">
    <li class="current_page_item"><a href="#">Home</a></li>
    <li><a href="#">Buy Tickets</a></li>
    <li><a href="#">Group Sales</a></li>
    <li><a href="#">Reviews</a></li>
    <li><a href="#">The Show</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Magic Shop</a></li>
 </ul>
</div>

Обратите внимание, что список заключен внутри блока .nav-wrap. Это сделано в связи с особенностями стилизации. Панель, на которой расположена навигация, растянута на всю ширину экрана, но сама навигация центрирована внутри этой панели.

CSS

Здесь мы располагаем список горизонтально, и позиционируем волшебную линию абсолютно, поверх меню. Все остальное – просто наведение красоты.

.nav-wrap { margin: 50px auto;  background-color: rgba(0,0,0,0.6); border-top: 2px solid white; border-bottom: 2px solid white; }
#example-one { margin: 0 auto; list-style: none; position: relative; width: 960px; }
#example-one li { display: inline-block; }
#example-one li a { color: #bbb; font-size: 14px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; }
#example-one li a:hover { color: white; }
#magic-line { position: absolute; bottom: -2px; left: 0; width: 100px; height: 2px; background: #fe4902; }

JQuery JavaScript

  1. Когда DOM загружен…
  2. Устанавливаем переменные, включающие текущее левое смещение навигации
  3. Добавляем волшебную линию к навигации
  4. Назначаем позиционирование и ширину волшебной линии равной значению текущего элемента списка
  5. Также назначаем оригинальную ширину и позиционирование в качестве данных, с тем чтобы их можно было использовать для обратной анимации
  6. При наведении мыши, подсчитываем новую ширину и левое позиционирование, и включаем анимацию для изменения этих значений
  7. При отведении мыши от пункта меню, включаем анимацию возвращения линии на исходную позицию.
$(function() {

    var $el, leftPos, newWidth,
        $mainNav = $("#example-one");

    $mainNav.append("<li id='magic-line'></li>");
    var $magicLine = $("#magic-line");

    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

    $("#example-one li a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });
    });
});

Альтернативная версия

На демонстрационной странице, также имеется альтернативная версия “волшебной” линии, использующая фон вместо линии, и анимирующей цвет вместе с шириной и левым позиционированием. В основе все то же самое, отличается разве что CSS и JavaScript, который получает цвет для нового элемента списка, из HTML-атрибута rel. Для анимации цвета, потребуется специальный плагин.

Скачать архив с примером.

Перевод статьи “jQuery MagicLine Navigation”, автор Chris Coyier

Примечение:
После небольшой доработки, скрипт нормально работает в опере и IE7-8, насчет IE6 не знаю, не тестировала.

16 комментариев

  1. Erlang:
    19.02.2010 в 23:19

    Красота :)
    Спасибо больше за пример.
    И вообще ваш блог мне нравится, много полезного встречаю.

    Ответить
  2. Korenev:
    21.02.2010 в 03:05

    Суперски получилось.

    Ответить
  3. EGORR:
    26.02.2010 в 23:01

    Кому интересно…
    h**p://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
    другое воплощение этой идеи…

    Ответить
  4. EGORR:
    27.02.2010 в 08:31

    … и подробный мануал с примерами
    h**p://nixboxdesigns.com/projects/jquery-lavalamp/tutorials.php

    Ответить
  5. Анатолий:
    28.02.2010 в 14:39

    Я уже встречал такую навигацию в рунете. Переводят видимо с одних источников, или друг у друга копируют :)

    Ответить
    1. dreamhelg:
      28.02.2010 в 16:54

      Эта статья была опубликована в блоге css-tricks.com, блог довольно популярный, многие читают его.

      Ответить
    2. Vasiliy:
      21.03.2010 в 09:57

      А что в этом плохого? Я лично по английски ни бэ ни мэ. Для меня этот блог с качественными переводами просто находка.

      Ответить
  6. Lenny:
    09.03.2010 в 11:15

    У меня на одном сайте на флеше такой эффект сделан на флеше, не знал, что на jQuery можно сделать, спасибо за информацию

    Ответить
  7. Andrey:
    21.03.2010 в 09:31

    А какие доработки нужны, что бы нормально работал в опере и IE7-8?
    Можно поподробней?

    Ответить
    1. dreamhelg:
      22.03.2010 в 08:18

      Так вроде и так работает нормально в Опере и IE7-8, разве нет?

      Ответить
  8. Рост:
    09.07.2010 в 11:05

    Красивый контрол, но смущает вот это:

    #example-one li { display: inline-block; }

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

    Возможно, было бы лучше применить плавающие элементы?

    #example-one li { float: left; }

    ?

    Ответить
    1. dreamhelg:
      09.07.2010 в 12:40

      Можно так, или сециально для IE6 применить хак со стилем display: inline. Хотя для ие6 я не тестровала, там даже для ие7-8 пришлось кое-что подправить.

      Ответить
  9. d1mS:
    20.03.2011 в 16:38

    Так как же исправить баги в Опере?

    Ответить
  10. GeSTaM:
    09.11.2011 в 13:46

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

    Ответить
  11. Artem:
    15.03.2012 в 14:00

    А как сделать данную скользящую полосу только для некоторых пунктов меню.
    Ну например для 2 3 и 4 пунктов, а для первого и оставшихся убрать?

    Ответить
  12. Андрей:
    30.05.2015 в 16:12

    Благодарю! Воспользовался вашим скриптом, очень помогло!

    Ответить

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

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

Об авторе

avatar

Ольга Фомина

Senior Frontend Developer
Почтовые технологии
telegram youtube instagram vkontakte

Рубрики

  • angular
  • JavaScript
  • nodejs
  • svg
  • wordpress
  • верстка
  • изучаем Jquery
  • общая
  • переводы
  • плагины Jquery
  • юнит-тесты
© 2023 Очередной блог фрилансера | Powered by Superbs Personal Blog theme