Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Свежий софт


Wrecker Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Wrecker Virtual DJ
Virtual DJ
Wrecker SoundForge 11
SoundForge 11
Wrecker Alcohol 120
Alcohol 120
Wrecker Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Рекомендуем



Главная » 2013 » Декабрь » 2 » Навигация с эффектом лестницы

21:52
Навигация с эффектом лестницы

Навигация с эффектом лестницы


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

Можно выбрать "следующие" элементы в CSS. Можно использовать обобщенный комбинатор соседей или соседние селекторы для получения всех следующих элементов  (которые можно выстроить в цепочку). Но ни один из них не позволяет получать предыдущие элементы, чтобы построить структуру, изображенную на рисунке, приведенном выше.

Демо                        Скачать

Вместо того, изощряться с CSS для решения такой задачи, применим технологию, которая действительно может выбрать предыдущий элемент: jQuery. jQuery имеет функцию .prev() (а также несколько других подобных функций), которая поможет нам получить то, что нужно.

$("nav a").hover(function() {

  $(this)

   .addClass("stair-1")

   .prev()

     .addClass("stair-2")

     .prev()

       .addClass("stair-3")

       .end()

     .end()

   .next()

     .addClass("stair-2")

     .next()

       .addClass("stair-3"); 

});

 

Предположительно, нужно удалять все классы для всех элементов в событии mouseleave. Значит, более эффективно будет наличие указателя на все нужные элементы.

var navEls = $("nav a");

 

navEls

  .on("mouseenter", function() {

     // добавим сюда классы, как в выше приведенном коде

  })

  .on("mouseleave", function() {

     navsEls.removeClass("stair-1 stair-2 stair-3");

  })

 

Установку можно сделать более эффективной. Использование функций .next() и .prev() принуждает jQuery двигаться по структуре DOM, чтобы вычислить нужное. Мы можем сразу выбрать элементы, основываясь на на том, что уже выбрано, используя положение в наборе. Функция .index() поможет нам определить место, а функция .eq() выберет элемент на основе индекса.

navEls

  .mouseenter(function() {

 

    $(this).addClass("stair-1");

 

    var index = $(this).index();

   

    allLinks.eq(index+1).addClass("stair-2");

    allLinks.eq(index-1).addClass("stair-2");

 

    allLinks.eq(index+2).addClass("stair-3");

    allLinks.eq(index-2).addClass("stair-3");

 

  })

 

CSS отвечает за дизайн

Обратите внимание, что jQuery только добавляет и удаляет классы. Именно в этом и заключается совместная работа JavaScript и интерфейса. JavaScript отвечает за контролирование состояний, а CSS делает визуальные изменения.

Весь эффект лестницы основывается на следующих классах.

.stair-1 {

  transform:

    scale(1.10)

    translateX(24px)

  box-shadow: 0 0 10px rgba(black, 0.75);

  z-index: 3;

}

.stair-2 {

  transform:

    scale(1.07)

    translateX(12px)

  box-shadow: 0 0 10px rgba(black, 0.5);

  z-index: 2;

}

.stair-3 {

  transform:

    scale(1.04)

    translateX(4px)

  z-index: 1;

}

 

Верхняя ступенька (stair-1) увеличивается, смещается вправо и имеет большую тень. Для каждой следующей ступеньки данные свойства немного уменьшаются. Здесь можно сделать все, что угодно для совмещения с общим стилем приложения.

 

Плагин jQuery?

Заголовок данного раздела подводит нас к интересной теме.

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

Тем не менее, мы сделаем плагин, так задача очень интересна.

 

Опции плагина

Мы сделаем простой набор доступных опций: сколько ступеней используется в эффекте. Плагин будет вызываться для навигационного элемента, который содержит только ссылку:

$(".main-nav").stairwayNav({

  stairs: 2

});

 

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

$.fn.stairwayNav = function(options) {

 

  var defaults = {

     stairs: 3

  };

  this.options = $.extend({}, defaults, options);

  var stairs = this.options.stairs;

 

Такой шаблон помогает автоматически устанавливать значение переменной: если пользователь установил значения, используем их, а если нет - берем значения по умолчанию.

 

Цикл

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

navEls

  .mouseenter(function() {

    $(this).addClass("stair-1");

    var index = $(this).index(), i, bef, aft;

    for(i = 1; i < stairs; i++) {

     

      bef = index - i;

      aft = index + i;

    

      allLinks.eq(aft).addClass("stair-" + (i+1));

      if (bef > 0) {

        allLinks.eq(bef).addClass("stair-" + (i+1));

      }

    }  

  })

 

 

Демо                        Скачать



 

Источник урока: css-tricks.com/stairway-navigation-a-jquery-plugin/

Категория: CSS//HTML//JS | Просмотров: 924 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация

    • Читаемое

    Категории

    Заходи не жди

    Web Template created with Artisteer.