Дебаунсинг выпадающего списка (меню сайта) средствами одного CSS
Ожидает приглашения
Предыстория
Около пяти-шести лет назад я переделывал меню на рабочем сайте (не называю). Меняли меню каталога со старомодного разворачивающегося на (сейчас относительно) современное выпадающее. Меню делали горизонтальное, выпадающее вправо.
Коллега обратил мое внимание на проблему «цепляния за соседние пункты» при передвижении курсора мыши к выпавшим подпунктам меню. Он предложил решить ее так, как это было тогда сделано на сайте Амазона, и скинул мне местную статью Загадка выпадающего списка «Амазона» (где и постановка задачи и описание решения и ссылки на).
Но мне не хотелось не глядя вставлять чужое решение, не хотелось разбираться в нем, не хотелось писать свой велосипед, зато как-то быстро пришла в голову идея своего на одном лишь CSS. И получилось удобоваримо.
Я долго ждал, когда увижу, что кто-то сделал что-то подобное (и мне не придется писать на Хабр), но пока не дождался. Возможно плохо смотрел.
Проблема
Для выпадающих меню (особенно выпадающих горизонтально) при управлении мышкой существует неприятный момент при перемещении курсора от выбранного пункта к развернутому блоку подпунктов: часто приходится двигать курсор не по прямой, а по кривой, так чтобы не задеть соседние корневые пункты.
На картинке, думаю, понятно изображено. Двигать нужно по синим стрелкам. Кратчайшее движение по красной стрелке приведет к перескоку на пункты 4 и 3. Кто хочет проверить: ссылка на jsfiddle.
Мое решение
Живой пример возможно многим пояснит лучше дальнейших слов.
Мое решение: при зависании мыши над корневым пунктом меню закрываем соседние пункты прозрачным дочерним элементом (dom-елементом) этого пункта, таким образом, чтобы на соседних элементах событие hover уже не происходило.
В примере для наглядности этот вспомогательный элемент div.unhover сделал полупрозрачным красным. В продакте, конечно, ставим ему в стиле background: transparent.
А чтобы другой корневой пункт все-таки можно было выбрать, прячем этот вспомогательный div, если курсор передвинут непосредственно на него или на выпавший блок. Но делаем это с анимацией свойства width этого вспомогательного элемента.
В общем при движении курсора к подпунктам (зеленая стрелка) эта «шторка» div.unhover плавно но быстро сворачивается ему вслед. Скорость анимации нужно подбирать по ширине меню и скорости движения мыши среднестатистического посетителя.
Чтобы не происходило осцилляций вспомогательного блока, названия корневых пунктов обернуты в span'ы, которые при наведении получают больший z-index, чем их сестринский div.unhover.
Заключение
Оригинальное амазоновское решение по юзабилити лучше, так как не зависит от скорости движения мыши и имеет минимальную задержку при движении мыши между корневыми пунктами.
Но в последнее время даже на ведущих сайтах в лучшем случае отделываются простой задержкой переключения корневых пунктов. Оно и понятно тач-интерфейсы основательно вышли на передний план.