Почему подменю закрывается, когда ведёшь к нему мышку: невидимый треугольник и промпт для Claude Code
Подменю переключается, когда курсор наискосок задевает соседний пункт. Разбираем приём «треугольник намерения» и даём готовый промпт, который чинит меню на твоём сайте.
Ты ведёшь мышку от пункта меню к его подменю наискосок, по пути задеваешь соседний пункт, и подменю переключается на чужое. Приходится возвращаться и вести курсор строго по горизонтали, а потом вниз.
Обычно это лечат задержкой: подменю ждёт несколько сотен миллисекунд перед переключением. Ошибок становится меньше, но меню начинает ощущаться вязким, потому что задержка срабатывает и тогда, когда ты действительно хотел перейти к другому пункту.
Как это решили без задержки
Приём известен давно. В 2013 году его подробно разобрал Бен Каменс на примере меню Amazon и выложил библиотеку jQuery-menu-aim под лицензией MIT. Идея такая: от текущей точки курсора к верхнему и нижнему углу ближнего края подменю мысленно строится треугольник.
- Курсор движется внутри треугольника: человек идёт к подменю, переключать ничего не нужно.
- Курсор вышел из треугольника: человек выбрал другой пункт, переключаем сразу, без ожидания.
- Курсор остановился внутри треугольника: ждём совсем немного и переключаем на пункт под курсором.
Задержка остаётся только там, где намерение неясно, а в остальных случаях меню реагирует мгновенно.
Промпт для Claude Code
Открой Claude Code в папке своего сайта и вставь:
В моём сайте есть выпадающее меню с подменю справа. Когда я веду мышкой из пункта к подменю наискосок,
курсор задевает соседний пункт и подменю переключается. Сделай «треугольник намерения»:
1. Запоминай последние 3 позиции курсора (mousemove).
2. Когда курсор уходит с пункта, строй треугольник: текущая точка курсора и верхний и нижний углы
ближнего края подменю.
3. Если курсор движется внутри треугольника, не переключай подменю.
4. Если курсор вышел из треугольника, переключай сразу.
5. Если курсор остановился внутри треугольника, подожди 300 мс и переключи на пункт под курсором.
6. Без задержки «на всякий случай» при обычном наведении. Без сторонних библиотек.
7. На тач-устройствах ничего не меняй: там меню открывается тапом.
Найди компонент меню сам, покажи план, потом внеси правку и объясни, как проверить руками.Если подменю у тебя открывается не справа, а снизу, замени в первой строке «справа» на «снизу»: треугольник тогда строится к верхнему краю подменю.
Как проверить
- Наведи курсор на пункт с подменю и веди мышку к подменю по диагонали через соседние пункты. Подменю не должно переключаться.
- Уведи курсор с пункта прямо вниз, на соседний пункт. Подменю должно смениться сразу, без паузы.
- Остановись на полпути к подменю над соседним пунктом. Примерно через треть секунды подменю переключится на него.
- Открой сайт с телефона: меню должно работать по тапу, как раньше.
Комментарии