@kaban4o

Как правильно реализовать меню?

Есть вот такое меню
Работает, но мне не нравится, что когда срабатывает событие mousemove , после того как я убрал курсор, линия(нижнее подчеркивание) не пропадает под текстом.Как ее убрать , после того как курсор убран.

И так же например, у меня есть в меню активный class=active; Если есть этот класс, применять к тегу li нижнее подчеркивание, что б когда я наводился на другое слово, она с активного класса переезжала.

Как такое реализовать?)Тут css не поможет.
  • Вопрос задан
  • 128 просмотров
Решения вопроса 2
hzzzzl
@hzzzzl
const marker = document.querySelector('#marker');
const item = document.querySelectorAll('nav .menu li');
const ul = document.querySelector('ul')
let timeout = null

ul.addEventListener('mouseleave', () => {
  clearTimeout(timeout)
  timeout = setTimeout(() => {
    marker.style.width = '0px';
  }, 500)
})

function indicator(e){
    marker.style.left = e.offsetLeft+'px';
    marker.style.width = e.offsetWidth+'px';
}

item.forEach(link =>{
    clearTimeout(timeout)
    link.addEventListener('mousemove', (e) =>{
        indicator(e.target);
    })
})
Ответ написан
Комментировать
KorniloFF
@KorniloFF Куратор тега JavaScript
Работаю по font-end / JS

Если я правильно понял из объяснений?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы