Эта статья была написана в 2009 году и остается одной из наших самых популярных публикаций. Если вы хотите узнать больше о jQuery, вы можете найти эту недавнюю статью в реестре плагинов jQuery, которая представляет большой интерес.
Мега выпадающие меню появляются повсюду, и теперь, когда гуру юзабилити, Якоб Нильсен считает, что они довольно хороши , вы можете ожидать увидеть еще больше из них очень скоро.
Вот что он сказал об этой тенденции:
Учитывая, что регулярные выпадающие меню изобилуют проблемами с юзабилити, мне нужно много рекомендовать новую форму выпадающего меню. Но, как показывают наши тестовые видео, мега-выпады преодолевают недостатки регулярных выпадений. Таким образом, я могу рекомендовать одно, предупреждая другого.
Конечно, статья Нильсена содержит несколько полезных советов о наиболее удобном способе их реализации. Вот что он рекомендует, в двух словах:
- Лучшие мега раскрывающиеся меню содержат простые, логичные группы информации, поэтому их легко сканировать и перемещаться.
- Сохраняйте их простыми — избегайте использования сложных элементов графического интерфейса или других неудобных интерактивных элементов.
- Мега выпадающее меню должно появляться только после того, как пользователь завис в течение 0,5 секунд. Если меню настроены на мгновенное появление, и пользователь случайно наведет курсор мыши на меню, они увидят множество мерцающих меню — и это неприятно.
- Если пользователь отходит от пункта меню или от мега-раскрывающегося списка, раскрывающийся список должен оставаться в течение 0,5 секунды — на случай, если пользователь случайно выкатит свою мышь из коробки.
Итак, как бы мы пошли на реализацию этих? Хотя было бы здорово сделать все это в чистом HTML и CSS, в настоящее время невозможно получить эти хорошие полсекундные задержки — и, конечно, есть неприятная проблема с Internet Explorer 6, который поддерживает только :hover on anchor элементы. Вместо этого я выбрал решение, используя jQuery и очень изящный плагин hoverIntent.
Дизайн
Давайте представим, что у нас есть клиент Mega Shop. Их дизайнер прислал нам макет, который включает в себя несколько мега выпадающих меню. Вы можете увидеть соответствующую часть этого макета ниже ( посмотреть полноразмерную версию здесь ).
Разметка
Первый: разметка. Я начал с довольно простого меню, основанного на неупорядоченном списке. Разметка выглядит так:
<ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">Stuff for him</a></li> <li><a href="#">Stuff for her</a></li> <li><a href="#">Stuff for kids</a></li> <li><a href="#">Stuff for pets</a></li> </ul>
Я добавлю div после каждой из выпадающих ссылок — они будут содержать содержимое меню. Кроме того, я хотел бы иметь возможность указать, что для этих элементов есть выпадающий список, поэтому я также добавлю класс .mega к этим элементам списка. Наконец, я хочу убедиться, что это меню имеет смысл при просмотре без стилей, и, поскольку каждая категория будет действовать как своего рода заголовок, я добавлю некоторую разметку заголовка к элементам. Вот один элемент списка:
<li class="mega"> <h2> <a href="#">Stuff for him</a> </h2> <div> <!-- Contents here --> </div> </li>
Далее, давайте добавим некоторый контент к этим элементам. Вот один из них:
<li class="mega"> <h2> <a href="#">Stuff for him</a> </h2> <div> <h3> Menswear </h3> <p> <a href="#">Shirts</a>, <a href="#">T-shirts</a>, <a href="#">Accessories</a>, <a href="#">More...</a> </p> <h3> Gifts </h3> <p> <a href="#">Sporting goods</a>, <a href="#">Gadgets</a>, <a href="#">More...</a> </p> <h3> Clearance! </h3> <p> 40% off all photo accessories this weekend only. <a href="#">Don't miss out!</a> </p> <a href="#" class="more"> More stuff for him...</a> </div> </li>
Конечно, мне нужно добавить разметку, чтобы представить заголовок сайта. К сожалению, у нас нет времени, чтобы обсудить это подробно, но вы можете увидеть, что я сделал в нашем первом примере, unstyled.html .
Стиль
Дальше я положу на какой-нибудь стиль. Сейчас мы просто сконцентрируемся на наиболее важных частях стилизации элементов списка и раскрывающихся списков. Однако, если вам интересно просмотреть всю таблицу стилей, вы можете просмотреть ее полностью во втором примере, styles.css .
Каждый элемент мега-списка настроен так, чтобы отображать в строке, чтобы получить эту красивую горизонтальную полосу. Нам бы хотелось, чтобы раскрывающиеся меню перекрывали страницу сразу под элементом списка; чтобы достичь этого, мы будем использовать position: relative в каждом элементе мега-списка, а позже мы будем использовать position: absolute в div s:
ul#menu li { display: inline; position: relative; }
Каждый div оформлен в стиле макета, который мы получили от дизайнера. Я использовал position: absolute здесь, чтобы выровнять их по левому краю с каждым элементом списка, и расположить их чуть ниже. Я также использовал display: none как универсальное средство для всех элементов div которые являются потомками этого меню, что поможет скрыть тот, который находится под ссылкой домашней страницы:
ul#menu div { display: none; } ul#menu li.mega div { width: 18em; position: absolute; top: 1.6em; left: 0em; }
Я добавлю еще один класс для этих элементов списка, .hovering , и сделаю его дочерние элементы div видимыми с помощью display: block . Позже, используя JavaScript, я добавлю .hovering class к элементу списка при наведении .hovering class мыши на него и удалю класс, когда мышь покинет область:
ul#menu li.hovering div { display: block; }
скрипт
Теперь давайте добавим JavaScript. Я решил использовать jQuery для этого примера; Конечно, вы можете написать свои собственные сценарии или использовать другую среду. Вы можете подумать, что это немного излишне — использовать все накладные расходы огромной библиотеки для одного маленького меню. Однако это только одна часть нашего гипотетического сайта электронной коммерции, и я почти наверняка планирую использовать jQuery и для других частей интерфейса.
Во-первых, конечно, я включу библиотеку jQuery. Далее я также добавлю очень изящный плагин с именем hoverIntent . У jQuery есть свое собственное событие при наведении, но оно срабатывает, как только мышь касается целевой области. Вместо этого мы хотим реализовать эффект с задержкой, рекомендованный Якобом Нильсеном: мы хотели бы дождаться, когда пользователь перестанет двигать мышью. Плагин hoverIntent обеспечивает это, принимая во внимание скорость перемещения мыши.
Во-первых, нам нужно написать пару функций для добавления и удаления класса .hovering — это класс, который включает отображение .hovering :
function addMega(){ $(this).addClass("hovering"); } function removeMega(){ $(this).removeClass("hovering"); }
Затем мы будем использовать функцию hoverIntent чтобы отключить эти функции, когда hoverIntent курсор на элемент или оставим его. Во-первых, нам нужно установить некоторые переменные конфигурации:
var megaConfig = { interval: 500, sensitivity: 4,
Параметр интервал указывает количество миллисекунд (то есть тысячных долей секунды), которые hoverIntent использует для проверки движения мыши. Параметр чувствительности указывает количество пикселей, которые должна пройти мышь в течение параметра интервала, чтобы считаться движущимся. Если мышь сдвинулась меньше, она считается парящей.
over: addMega,
Параметр over указывает функцию, которая будет вызываться после остановки мыши.
timeout: 500, out: removeMega };
Параметр timeout указывает, как долго мы хотели бы подождать в миллисекундах, прежде чем выполнять функцию отключения мыши. Параметр out указывает, что делать после того, как эта задержка прошла, поэтому в этом примере функция hideMega будет вызываться через 500 миллисекунд.
Наконец, мы прикрепим функцию hoverIntent к .mega списка .mega , сказав ей, чтобы она начала искать указатели мыши и указатели мыши, используя настроенную нами конфигурацию:
$("li.mega").hoverIntent(megaConfig)
И это все!
Время тестирования
Время проверить наше меню! Вы можете увидеть завершенную демонстрацию с разметкой, стилем и сценарием в нашем последнем примере complete.html .
Что теперь?
Здесь можно добавить намного больше — например, выпадающее меню может иметь некоторые существенные проблемы с доступностью, поэтому было бы неплохо найти способ также добавить действия клавиатуры в это меню. Также было бы неплохо добавить некоторые более интересные элементы дизайна в эти меню, такие как значки, тени или расположение столбцов. На данный момент, тем не менее, у нас довольно солидное начало!
Если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как основы jQuery .
Комментарии к этой статье закрыты. У вас есть вопрос о jQuery? Почему бы не спросить об этом на наших форумах ?