Библиотека Интернет Индустрии I2R.ru

Сегодня в одном разговоре возник вопрос о непростом отслеживании движения курсора мыши над выпадающими меню. Помню, что когда-то читал по этому поводу статью какого-то юзабилити-гуру, но сейчас найти так и не смог. Поэтому решил написать об этом сам, чтобы потом было куда ссылаться. А глядишь, в комментариях кто-нибудь и ту статью подскажет :-).

Речь идет о выпадающих меню, в которых пункты выбираются просто при наведении мыши, без клика. То есть так, как это работает во всех развитых оконных средах.

Представьте себе открытое вертикальное popup-меню, у которого выбран верхний пукнт, который ведет к подменю, которое тут же открывается справа (для простоты положим, что места справа и внизу полно).

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

Но такого не происходит. Во всех нормальных оконных средах есть специальная логика, которая отслеживает это движение, и если оно “похоже” на движение к подменю — придерживает его закрытие. Сделано так потому, что человеку сложнее и медленнее двигать мышь строго в горизонтальном и вертикальном направлении, и практически все люди, когда выбирают пункт в подменю, ведут мышь хоть и не точно напрямик, но сильно срезая углы.

Сама программная логика эта, кстати, довольно непростая, одним таймаутом на закрытие меню тут не обойдешься. Ведь если пользователь ведет мышь более вертикально, для того, чтобы открыть другое подменю, то задержка в закрытии первого будет его тормозить. Также и в случае, если мышь провести по срезаемому пути обратно от подменю к основному меню, подменю должно закрываться без задержки (проверьте!).

Кстати, в выпадающих меню на веб-страницах такой логики нет. Браузеры не могут ее реализовать, потому что нет какого-то одного стандартного способа делать меню, и для браузера это просто кусок скрипта и HTML’а разной степени витиеватости. А веб-разработчики не реализуют ее в скриптах, потому что это, говоря прямо, одуреешь программировать крайне непросто.

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

P.S. Это, кстати, еще одна иллюстрация к тому, что программировать контролы пользовательских интерфейсов — трудно.

Материалы по теме:

• Навигация и меню. Создание вкладок
• Выпадающие меню с помощью CSS
• CSS Design: Укрощение списков
• Изготовление меню из блоков с использованием CSS
• Выпадающее меню за пять минут как пример применения CSS
• Изготовление меню с ярлычками. Часть первая
• Изготовление меню с ярлычками. Часть вторая
• Навигация в списках и блочные ссылки