Заходи
Гость

Хостинг

Статистика
Яндекс.Метрика Счетчик PR-CY.Rank
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Ccылки

Свежак

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

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


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

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

Статьи
[Менеджмент]
Факторы микросреды организации
[Безопасность систем]
Защита исходных текстов и двоичного кода
[Прогараммирование]
Разработка ПО с открытыми исходными текстами как особый вид прикладной науки
[Устронение ошибок систем]
Возможные нежелательные последствия разгона
[Прогараммирование]
ПОДПРОГРАММЫ. ПРОЦЕДУРЫ И ФУНКЦИИ
[Безопасность систем]
Резервирование и восстановление
[Бухгалтерский учет]
ПРИНЦИПЫ И КОНЦЕПЦИИ БУХГАЛТЕРСКОГО УЧЕТА В РЫНОЧНОЙ ЭКОНОМИКЕ
[Устронение ошибок систем]
Сообщения об ошибках AMI BIOS (часть 2)
[Прогараммирование]
Строковый тип данных
[Прогараммирование]
Оптимизация программ Delphi

Категории
HTML/CSS [21]
jQuery/JS [36]
PHP [4]
Для Ucoz [38]

Популярный софт
Iron Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Iron Virtual DJ
Virtual DJ
Iron SoundForge 11
SoundForge 11
Iron Alcohol 120
Alcohol 120
Iron Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Жми

Copyright MyCorp © 2018Конструктор сайтов - uCoz