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

Question

[kaban4o]

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

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

Как такое реализовать?)Тут css не поможет.

Answer 1

[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);
    })
})

Answer 2

[Павел Корнилов]

Если я правильно понял из объяснений?

Comments

[kaban4o]

спасибо)

[Павел Корнилов]

kaban4o, на здоровье! Рад был помочь.

[kaban4o]

Павел Корнилов Можете помочь, я обновил код под себя. Теперь другая проблема, добавил подменю, линиий неадекватно себя ведет, задал тегу li position:relative, если есть подменю.И теперь она перескакивает, а мне нужно что б при наведении только родителю li она была на месте)

[Павел Корнилов]

kaban4o, могу.


А вообще, хозяйке на заметку: https://developer.mozilla.org/ru/docs/Web/API/HTML...

[kaban4o]

Павел Корнилов, спасибо, буду смотреть доделывать)