Очередной блог фрилансера » навигация

Создание навигации “волшебная линия” с помощью jQuery

dreamhelg — Sun, 14 Feb 2010 18:41:17 +0000

Такой “скользящий” стиль навигации существует довольно давно, мне всего лишь было нужно изменить его немного под собственные нужды, поскольку появилась такая возможность. Это оказалось очень легко. Можете взглянуть на два примера такой навигации на демонстрационной странице.

Идея

Идея состоит в наличие какой-либо подсветки (фонового изображения или подчеркивания), следующей за мышью, при наведении к какому-либо пункту меню. Это реализуется с помощью анимации jQuery. Следовательно, “волшебную линию” можно добавить только с помощью JavaScript. После того, как линия будет добавлена и стилизована, при движении мыши к любому пункту меню, ее ширина и левое позиционирование будет изменятся с анимационным эффектом.

HTML

Здесь обычный маркированный список. Ему назначен класс “group”, так как в примере будет использовано два горизонтальных меню. ID используется для указания элемента JavaScript. [html]

[/html] Обратите внимание, что список заключен внутри блока .nav-wrap. Это сделано в связи с особенностями стилизации. Панель, на которой расположена навигация, растянута на всю ширину экрана, но сама навигация центрирована внутри этой панели.

CSS

Здесь мы располагаем список горизонтально, и позиционируем волшебную линию абсолютно, поверх меню. Все остальное – просто наведение красоты. [css] .nav-wrap { margin: 50px auto; background-color: rgba(0,0,0,0.6); border-top: 2px solid white; border-bottom: 2px solid white; } #example-one { margin: 0 auto; list-style: none; position: relative; width: 960px; } #example-one li { display: inline-block; } #example-one li a { color: #bbb; font-size: 14px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; } #example-one li a:hover { color: white; } #magic-line { position: absolute; bottom: -2px; left: 0; width: 100px; height: 2px; background: #fe4902; } [/css]

JQuery JavaScript

Когда DOM загружен…
Устанавливаем переменные, включающие текущее левое смещение навигации
Добавляем волшебную линию к навигации
Назначаем позиционирование и ширину волшебной линии равной значению текущего элемента списка
Также назначаем оригинальную ширину и позиционирование в качестве данных, с тем чтобы их можно было использовать для обратной анимации
При наведении мыши, подсчитываем новую ширину и левое позиционирование, и включаем анимацию для изменения этих значений
При отведении мыши от пункта меню, включаем анимацию возвращения линии на исходную позицию.

[javascript] $(function() { var $el, leftPos, newWidth, $mainNav = $("#example-one"); $mainNav.append("

"); var $magicLine = $("#magic-line"); $magicLine .width($(".current_page_item").width()) .css("left", $(".current_page_item a").position().left) .data("origLeft", $magicLine.position().left) .data("origWidth", $magicLine.width()); $("#example-one li a").hover(function() { $el = $(this); leftPos = $el.position().left; newWidth = $el.parent().width(); $magicLine.stop().animate({ left: leftPos, width: newWidth }); }, function() { $magicLine.stop().animate({ left: $magicLine.data("origLeft"), width: $magicLine.data("origWidth") }); }); }); [/javascript]

Альтернативная версия

На демонстрационной странице, также имеется альтернативная версия “волшебной” линии, использующая фон вместо линии, и анимирующей цвет вместе с шириной и левым позиционированием. В основе все то же самое, отличается разве что CSS и JavaScript, который получает цвет для нового элемента списка, из HTML-атрибута rel. Для анимации цвета, потребуется специальный плагин. Скачать архив с примером. Перевод статьи “jQuery MagicLine Navigation”, автор Chris Coyier Примечение: После небольшой доработки, скрипт нормально работает в опере и IE7-8, насчет IE6 не знаю, не тестировала.

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

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

«Скользящая дверь» c одним изображением

dreamhelg — Fri, 11 Sep 2009 15:56:17 +0000

Сегодня, я собираюсь поделиться одной замечательной CSS-техникой, о которой узнала совсем недавно. Она довольно простая, как все гениальное, и немного похожа на технику верстки блоков с закругленными краями. Вообще, термин [...]

WordPress и хлебные крошки

dreamhelg — Wed, 14 Jan 2009 13:54:15 +0000

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