(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Загадка выпадающего списка "Амазона"

Источник: habrahabr
FakeFactFelis

Бен Кэменс обнаружил, что в выпадающем списке Shop by Department на сайте "Амазон" ховер-эффект происходит очень быстро, абсолютно без какой-либо задержки. Тем самым происходит нарушение старого, выработанного ещё в 90-х годах прошлого века правила: перед отображением пункта подменю необходим так называемый гистерезис, запаздывание.

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


Пример проблемы в Mac OS. Из-за отсутствия задержки зелёный путь не сработает в NEXTSTEP и унаследованных от него виджетах.

Эта задержка есть практически во всех меню с выпадающими элементами, как, например, на сайте "Академия Хана".

Бен глубоко задумался, как в "Амазоне" решили эту проблему; вопрос ввел его в ступор, словно переходящего дорогу физика - внешне бесполезная задача по расчету сопротивления между двумя точками бесконечной сетки одноомных резисторов в комиксе Nerd Sniping. Ведь если бы задержки не было, при задевании другого пункта меню выпал бы новый элемент, и попасть в уже увиденный было бы невозможно, что случается, к примеру, в твиттеровском Бутстрэпе.

Что же сделали с сайтом "Амазона"? Бен выяснил, что здесь путь курсора определяется особым образом.

Для каждого положения курсора высчитывается треугольник с вершинами в верхнем и нижних углах списка и курсоре (на рисунке выделено голубым). Если курсор попадает на область другого элемента в голубом треугольнике, уже открытое подменю сменится, но с задержкой, которая даст пользователю возможность протащить курсор в область подменю. Нет смысла менять подменю на Appstore for Android сразу же при попадании курсора на него - может быть, пользователь ведет курсор на пункт Learn more about Cloud Drive. Если же курсор находится вне треугольника, подменю переключится немедленно, без задержки.

Эта, по сути, мелкая деталь, единожды изобретенная, забытая и открытая заново, заставила Бена написать небольшой плагин jQuery-menu-aim для jQuery, который реализует такой же принцип функционирования выпадающих подменю. Он уже используется на сайте "Академия Хана".

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 12.03.2013 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
SAP Crystal Reports XI R2 Dev 2006 INTL WIN NUL License (Version 11)
TeeChart Standard VCL/FMX 2 developer license
Антивирус ESET NOD32 SMALL Business Pack newsale for 10 user. Электронный ключ.
Microsoft Office 365 Персональный 32-bit/x64. 1 ПК/MAC + 1 Планшет + 1 Телефон. Все языки. Подписка на 1 год.
Kaspersky Endpoint Security для бизнеса – Стандартный Russian Edition. 10-14 Node 1 year Base License
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
Компьютерные книги. Рецензии и отзывы
Один день системного администратора
Компьютерная библиотека: книги, статьи, полезные ссылки
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Поиск рабочих зеркал МарафонБет (8)
На сегодняшний день, просторы интернета позволяют нам легко найти зеркало на Марафон для входа в...
 
Нормальные казино в 2021 году (24)
После долгих поисков все таки смог найти хорошие игровухи, хотя и ушла куча времени, пока я...
 
Управление медиафайлами (1)
Обратите внимание на вот эту платформу https://picvario.ru для хранения, поиска и...
 
Ставки на спорт для новичков (8)
Если читаете эту статью https://futbolstavkiprognozy.ru/stavki-dlya-novichkov/, то наверняка...
 
Стратегии ставок на спорт (8)
Стратегии ставок на спорт от BET-EXPRESS...
 
 
 



    
rambler's top100 Rambler's Top100