главная

Теги:


Решение для длинного выпадающего меню

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

Для таких случаев может пригодиться следующее решение. Идея заключается в том, чтобы организовать прокрутку пунктов длинного выпадающего меню движениями курсора мыши:

Используем jQuery

Код решения полностью приводится ниже и снабжен комментариями. Все достаточно просто.

1. Устанавливаем максимальную высоту для выпадающего меню.
2. Получив событие hover, выводим подменю.
3. Вычисляем коэффициент скорости прокрутки на основании высоты подменю.
4. Отслеживаем перемещения курсора мыши по меню.
5. Прокручиваем меню при перемещениях курсора мыши, используя коэффициент скорости.
6. При потере фокуса ввода закрываем меню.

var maxHeight = 400;
	 
	$(function(){
	 
	    $(".dropdown > li").hover(function() {
	     
	         var $container = $(this),
	             $list = $container.find("ul"),
	             $anchor = $container.find("a"),
	             height = $list.height() * 1.1,       
	             multiplier = height / maxHeight;     
	         
          // Сохраняем оригинальное значение высоты контейнера, чтобы восстановить его
	        $container.data("origHeight", $container.height());
	         
	        $anchor.addClass("hover");
	         
	        // Выпадающее меню появляется точно под соответствующим пунктом родительского списка
	        $list
	            .show()
	            .css({
	                paddingTop: $container.data("origHeight")
	            });
	         
	        // Не делаем никаких анимаций, если список короче максимального значения
	        if (multiplier > 1) {
	            $container
	                .css({
	                    height: maxHeight,
	                    overflow: "hidden"
	                })
	                .mousemove(function(e) {
	                    var offset = $container.offset();
	                    var relativeY = ((e.pageY - offset.top) *
                         multiplier) - ($container.data("origHeight") * multiplier);
	                    if (relativeY > $container.data("origHeight")) {
	                        $list.css("top", -relativeY + $container.data("origHeight"));
	                    };
	                });
	        }
	         
	    }, function() {
	     
	        var $el = $(this);	         
	        // Устанавливаем оригинальные настройки
	        $el
	            .height($(this).data("origHeight"))
	            .find("ul")
	            .css({ top: 0 })
	            .hide()
	            .end()
	            .find("a")
	            .removeClass("hover");
	     
	    });
	     
	    // Добавляем стрелку вниз только к пунктам с подпунктами
	    $(".dropdown > li:has('ul')").each(function() {
	        $(this).find("a:first").append("");
	    });
	     
	     
	});

HTML и CSS

Код HTML и CSS в данном случае не представляет особенного интереса, поскольку все организовано стандартно - вложенные неупорядоченные списки для меню и типовые свойства для стилей. Весь код содержится в архиве с исходниками. Проверка Решение было успешно опробовано в нескольких браузерах, включая IE 6. Недостаток: необходимость использования JavaScript.

Источник урока: css-tricks.com/long-dropdowns-solution/

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

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


Copyright© 2009 Hosted by Zhost