55 lines
1.6 KiB
JavaScript
55 lines
1.6 KiB
JavaScript
// Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
|
|
// for details on configuring this project to bundle and minify static web assets.
|
|
|
|
// Write your JavaScript code.
|
|
|
|
|
|
const primaryNav = document.querySelector('.primary-navigation');
|
|
const navToggle = document.querySelector('.mobile-nav-toggle');
|
|
|
|
|
|
navToggle.addEventListener('click', () => {
|
|
const visibility = primaryNav.getAttribute('data-visible');
|
|
|
|
if (visibility == "false") {
|
|
primaryNav.setAttribute('data-visible', "true");
|
|
navToggle.setAttribute('aria-expanded', "true");
|
|
}
|
|
else {
|
|
primaryNav.setAttribute('data-visible', "false");
|
|
navToggle.setAttribute('aria-expanded', "false");
|
|
}
|
|
|
|
navToggle.classList.toggle('active');
|
|
});
|
|
|
|
let Triangles = document.querySelectorAll('.Triangle')
|
|
|
|
Array.from(Triangles).forEach(function (Triangle) {
|
|
|
|
// play normal
|
|
Triangle.addEventListener('mouseover', () => {
|
|
Triangle.classList.add('active')
|
|
})
|
|
|
|
// play in reverse
|
|
Triangle.addEventListener('mouseout', () => {
|
|
Triangle.style.opacity = 0 // avoid showing the init style while switching the 'active' class*/
|
|
|
|
Triangle.classList.add('in-active')
|
|
Triangle.classList.remove('active')
|
|
|
|
// force dom update
|
|
setTimeout(() => {
|
|
Triangle.classList.add('active')
|
|
Triangle.style.opacity = ''
|
|
}, 1)
|
|
|
|
Triangle.addEventListener('animationend', onanimationend)
|
|
})
|
|
});
|
|
function onanimationend() {
|
|
this.classList.remove('active', 'in-active')
|
|
this.removeEventListener('animationend', onanimationend)
|
|
}
|