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

Всегда в теме

Статистика


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


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

Рекомендуем



Главная » 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 | Просмотров: 593 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

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

    Категории

    Заходи не жди