34 lines
785 B
JavaScript
34 lines
785 B
JavaScript
// interaction
|
|
|
|
const primaryNav = document.querySelector('nav')
|
|
const menuItem = document.querySelector('#menuItem')
|
|
|
|
// TODO: (create voice class per button)
|
|
// let menuVoices = []
|
|
|
|
for (let c of primaryNav.children) {
|
|
// TODO: (create voice class per button)
|
|
// menuVoices[c.dataset.link] = new voice()
|
|
|
|
c.addEventListener('click', () => {
|
|
console.log(`clicked : ${c.dataset.link}`)
|
|
})
|
|
|
|
c.addEventListener('mouseenter', () => {
|
|
menuItem.innerHTML = c.dataset.link
|
|
menuItem.className = 'active'
|
|
voice.play()
|
|
})
|
|
|
|
c.addEventListener('mouseout', () => {
|
|
menuItem.className = 'inactive'
|
|
voice.release()
|
|
})
|
|
|
|
menuItem.addEventListener('transitionend', () => {
|
|
if (menuItem.className == 'inactive') {
|
|
menuItem.innerHTML = ''
|
|
}
|
|
})
|
|
}
|