Меню, которое реагирует на курсор!

Интерфейс качественный, когда элементы дают мгновенную визуальную обратную связь. В этом приёме пункт меню подсвечивается и слегка смещается при наведении, создавая эффект активной строки без перегруженной анимации.

Как работает:

• состояние :hover используется как источник интерактивности — без обработчиков событий;

• фоновая подсветка формирует чёткую активную область;

• transform: translateX() добавляет ощущение «притяжения» к курсору;

• движение выполняется через transform, поэтому не вызывает перерасчёта layout и остаётся плавным.

Такой микроэффект делает навигацию более предсказуемой и снижает визуальную нагрузку по сравнению с тяжёлыми анимациями.

Code Ready | #фишка