Очередной блог фрилансера » меню

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

dreamhelg — Thu, 29 Oct 2009 05:05:30 +0000

Мне нравится давать статьям точные заголовки, но в данном случае, правильно было бы сказать *возможное* решение для очень длинного, выпадающего меню. Проблема с такими меню состоит в том, что выпадающий список может выйти за пределы самой веб-страницы, то есть ниже видимой области окна браузера. Так, что для доступа к нижним пунктам меню, вам понадобится прокручивать страницу до нужного пункта. Для пользователей, имеющих специальное колесо прокрутки у мыши, это не большая проблема. Для тех же, у кого нет такой полезной функциональности, длинное выпадающее меню станет совершенно неработоспособным, потому что для прокрутки окна, им придется использовать полосу прокрутки браузера, для чего придется отвести мышь от меню, в связи с чем, меню, конечно же, закроется. Но есть очень простое решение для этого. Прежде чем мы начнем, взгляните на результат. Впервые, я увидел эту идею на странице аккаунта, на сайте Media Temple. У них есть выпадающее меню для «Доменов», в котором перечислены все ваши домены, находящиеся у них на хостинге. Это может быть очень длинный список. Но, Media Temple применили специальную технику – при прокручивании окна, меню также прокручивается в ускоренном режиме. И конечно, поскольку я делал скриншот, то обратил внимание, что замечательное решение, которое они так расхваливали, оказалось не таким уж хорошим. Это заставило меня задуматься, какие именно проблемы у них возникают с этим меню, так что давайте смотреть вместе. Далее представлена визуализация идеи:

JQuery делает это мгновенно

Я выложу весь код здесь, просто для справки. Код сопровождают комментарии, так что понять его будет легко. Он насчитывает 60 строк, но не пугайтесь, что это слишком много, весь код очень простой.

Устанавливаем максимальную высоту выпадающего меню
При наведении открываем дочернее меню
Рассчитываем коэффициент скорости, основанный на высоте дочернего меню
Отслеживаем движение мыши в меню
Прокручиваем меню вместе с движением мыши, основываясь на коэффициенте
При покидании мыши, закрываем меню

[javascript] 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(""); }); }); [/javascript]

HTML и CSS

Я не стал выкладывать здесь HTML и CSS, поскольку они очень простые и не интересные. Вы, в любом случае, можете скачать архив с примером, и посмотреть. Это самый обыкновенный, вложенный, маркированный список, и немного очень простых стилей.

Тестирование

Пример тестировался во всех браузерах, вплоть до IE6, меню отлично выглядит и работает везде. Скачать архив с примером. Перевод статьи "Solution For Very Long Dropdown Menus", автор Chris Coyier

Создаем эластичное меню из миниатюр

dreamhelg — Tue, 29 Sep 2009 10:49:02 +0000

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

HTML

HTML очень простой. Каждый пункт меню представляет собой ссылку, внутри которой расположено изображение: [html]

[/html]

CSS

Обычно, при ресайзе контейнера

, его высота увеличивается, причем он растет вниз. Однако, в нашем меню, нам нужно получить прямо противопложный результат - когда пользователь подводит мышью к миниатюре, она должна "вырасти", направляясь вверх (совсем как док в OSX). Для получения такого эффекта, мы будем использовать свойство position: fixed, которое поможет нам "зафиксировать" пункты меню по нижнему краю. Итак, вот какой будет CSS: [css] /* Контейнер, для нашего меню */ #menuwrapper{ position:relative; height:210px; } /* Устанавливаем меню по нижнему краю родительского div-a */ #menu{position:absolute; bottom:0;} /* Каждый пункт меню фиксируем по нижнему краю, и назначаем display:inline-block для создания эластичности */ .menuitem{ position:fixed relative; bottom:0px; display:inline-block; } [/css]

JQuery

jQuery в этом примере выполняет две функции:

уменьшает картинки при загрузке страницы
добавляет анимацию "растущей" картинке, при наведении мыши

Далее показан пример кода, который сможет все это реализовать: [javascript] $(document).ready(function(){ $('.menuitem img').animate({width: 100}, 0); //Уменьшаем все элементы меню $('.menuitem').mouseover(function(){ //Когда мышь подводят к меню gridimage = $(this).find('img'); //Назначаем цель в качестве переменной gridimage.stop().animate({width: 200}, 150); //Анимация растягивания картинки до оригинального размера }) .mouseout(function(){ //Когда мышь отводят от пункта меню gridimage.stop().animate({width: 100}, 150); //Анимация возврата картинки к маленькому размеру }); }); [/javascript]

Internet Explorer

И все бы хорошо, но IE как всегда порадовал неприятным сюрпризом, для того чтобы ваше меню красиво ресайзилось в Internet Explorer, вам нужно добавить одну строчку кода в CSS: [css] img { -ms-interpolation-mode: bicubic; } [/css] Вот и все, после этого, ваше меню готово к использованию. Архив с приведенным примером. Оригинал статьи "Sproing! – Make An Elastic Thumbnail Menu", автор Sam Dunn

Выпадающее меню в WordPress

dreamhelg — Sun, 14 Jun 2009 19:19:08 +0000

Выпадающее меню в представлении не нуждается, все давно уже поняли его преимущества. Удобный способ навигации, отражающий иерархию страниц сайта. И сегодня мы поговорим о том как создать такое меню в [...]