главная

Теги:


Вертикальное мульти меню

Сегодня мы разберемся, как создать вертикальное мульти меню. Такое меню может оказаться вполне удачным решением для дизайна сайта, при наличии огромного количества пунктов (в качестве примера можно взглянуть на сайт FLOWmarket). Идея заключается в том, что получается очень длинный список ссылок, который не входит целиком в область видимости или отведенное для него место. А если перемещаться курсор мыши по его пунктам, то список будет сам прокручиваться и выводить невидимые элементы.

Разметка HTML Код HTML представляет собой обыкновенный список:

Первые строчки CSS

Мы используем статическую высоту, поэтому должно быть установлено свойство overflow: auto;. Таким образом, меню будет прокручиваться и будет доступно вне зависимости от JavaScript.

#menu {
02	  height: 360px;
03	  overflow: auto;
04	}
05	 
06	#menu ul {
07	  list-style: none;
08	}
09	 
10	#menu a {
11	  text-decoration: none;
12	  display: block;
13	  color: black;
14	}

Начинаем писать JavaScript

Идея заключается в том, чтобы подождать, когда выделится ссылка меню и выровнять все остальное. Мы используем класс hover для задания стилей, затем перемещаем внутренний элемент div (который мы добавляем) вверх или вниз для получения эффекта. Но на какое расстояние его перемещать? Для этого нам нужно знать точно, какой пункт меню выделен курсором. Ссылка, которая находится выше, должна быть прокручена быстрее, чем ссылка, которая находится ниже. Мы берем позицию ссылки и используем умножение на значение скорости перемещения speed, чтобы вычислить смещение. Для определения позиции мы просто проходим циклом по всему списку и устанавливаем атрибут data-pos, значение которого используется для определения позиции.

("#menu").css("overflow", "hidden").wrapInner("
"); var $el, speed = 13.5, // Нужно подобрать значение переменной items = $("#menu a"); items .each(function(i) { $(this).attr("data-pos", i); }) .hover(function() { $el = $(this); $el.addClass("hover"); $("#mover").css("top", -($el.data("pos") * speed - 40)); // 40 - отступ для проявления }, function() { $(this).removeClass("hover"); });

Вы можете использовать атрибут данных HTML5 с помощью конструкции $("div").data("pos");.


Проявление

Если посмотреть демонстрационную страницу в браузере семейства WebKit, то будет видно постепенное проявление верхних и нижних пунктов меню при прокручивании. Эффект получен с помощью псевдо-элементов :before и :after с абсолютным позиционированием сверху и снизу меню, для которых установлен градиент от белого цвета до полной прозрачности.

#menu:before {
	  content: " ";
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 50px;
	  width: 100%;
	  z-index: 2;
	  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,100)),color-stop(1, rgba(255,255,255,0)));
	}
	 
	#menu:after {
	  content: " ";
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  height: 50px;
	  width: 100%;
	  z-index: 2;
	  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0)),color-stop(1, rgba(255,255,255,100))); }

Для проявления эффекта в других браузерах можно установить соответствующие префиксы самостоятельно .


Скорость прокрутки

На скорость прокрутки меню влияние оказывает коэффициент speed. В выше приведенном коде данный коэффициент получает значение 13.5. Данная величина была установлена в ходе практических опытов и попыток математически вычислить оптимальную скорость перемещения на основании количества пунктов и высоты меню. Но все эксперименты показали, что, вероятно, настройка при изменении количества пунктов не требуется или будет весьма незначительна, а использование различных формул приводит к отвратительно выглядящим результатам.


Навигация с помощью клавиш

Данное меню с текущими установками скорости прокрутки довольно сложно позиционировать точно с помощью мыши. Для решения данной проблемы мы можем использовать навигацию с помощью клавиш. Задача решается обработчиками события keydown для объекта document , который запускает соответствующую функцию. Сначала для текущего выбранного пункта вызывается событие mouseleave. В зависимости от нажатой клавиши увеличивается или уменьшается индекс позиции текущего выбранного пункта cur. И в завершение для текущего выбранного пункта генерируется событие mouseenter. А для событий mouseenter и mouseleave у нас уже есть готовый функционал (они приводят к генерации события hover, которое уже имеет обработчик).

$(document).keydown(function(event) {
	 
	        cur = $(".hover").attr("data-pos");
	 
	        // Стрелка вниз
	        if (event.keyCode == 40) {
	 
	                $("[data-pos=" + cur + "]").trigger("mouseleave");
	                if (cur != max) { cur++; }
	                $("[data-pos=" + cur + "]").trigger("mouseenter");
	 
	        }
	 	        // Стрелка вверх
	        if (event.keyCode == 38) {
	 
	                $("[data-pos=" + cur + "]").trigger("mouseleave");
	                if (cur > 0) { cur--; }
	                $("[data-pos=" + cur + "]").trigger("mouseenter");
	 
	        }
	 
	});

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


Заключение


Идея существенно ускорить прокручивание меню может привести к снижению удобства использования. Неким альтернативным способом точно указать нужный пункт в данном случае является использование навигации с помощью клавиатуры.

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


Источник урока: css-tricks.com/the-moveup-menu/

Урок Создан:2011-02-07 Просмотров:2304

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


Copyright© 2009 Hosted by Zhost