90 lines
2.6 KiB
JavaScript
90 lines
2.6 KiB
JavaScript
function menu__showChildren(nav, children) {
|
|
let submenu = children[0].querySelector('.menu__subs');
|
|
submenu.classList.add('active');
|
|
submenu.style.animation = 'slideLeft 0.5s ease forwards';
|
|
|
|
let title = children[0].querySelector('i').parentNode.childNodes[0].textContent;
|
|
nav.querySelector('.menu__title').innerHTML = title;
|
|
nav.querySelector('.menu__header').classList.add('active');
|
|
}
|
|
|
|
function menu__hideChildren(nav, children) {
|
|
let submenu = children[0].querySelector('.menu__subs');
|
|
submenu.style.animation = 'slideRight 0.5s ease forwards';
|
|
setTimeout(() => {
|
|
submenu.classList.remove('active');
|
|
submenu.style.removeProperty("animation");
|
|
}, 300);
|
|
|
|
children.shift();
|
|
if (children.length > 0) {
|
|
let title = children[0].querySelector('i').parentNode.childNodes[0].textContent;
|
|
nav.querySelector('.menu__title').innerHTML = title;
|
|
} else {
|
|
nav.querySelector('.menu__header').classList.remove('active');
|
|
nav.querySelector('.menu__title').innerHTML = '';
|
|
}
|
|
}
|
|
|
|
function menu__toggle(nav, overlay) {
|
|
nav.classList.toggle('active');
|
|
overlay.classList.toggle('active');
|
|
}
|
|
|
|
function menu__reset(menu, nav) {
|
|
nav.querySelector('.menu__header').classList.remove('active');
|
|
nav.querySelector('.menu__title').innerHTML = '';
|
|
menu.querySelectorAll('.menu__subs').forEach(submenu => {
|
|
submenu.classList.remove('active');
|
|
submenu.style.removeProperty("animation");
|
|
});
|
|
}
|
|
|
|
document.querySelectorAll('.menu__container').forEach(menu => {
|
|
|
|
let menuChildren = [];
|
|
const menuNav = menu.querySelector('.menu__nav');
|
|
const menuOverlay = menu.querySelector('.menu__overlay');
|
|
|
|
menu.querySelector('.menu__section').addEventListener('click', (e) => {
|
|
if (menuNav.classList.contains('active')) {
|
|
let target = e.target.closest('.menu__children');
|
|
if (target && target != menuChildren[0]) {
|
|
menuChildren.unshift(target);
|
|
menu__showChildren(menuNav, menuChildren);
|
|
}
|
|
}
|
|
});
|
|
|
|
menu.querySelector('.menu__arrow').addEventListener('click', () => {
|
|
menu__hideChildren(menuNav, menuChildren);
|
|
});
|
|
|
|
menu.querySelector('.menu__close').addEventListener('click', () => {
|
|
menu__toggle(menuNav, menuOverlay);
|
|
setTimeout(() => {
|
|
menu__reset(menu, menuNav);
|
|
menuChildren = [];
|
|
}, 300);
|
|
});
|
|
|
|
menu.querySelector('.menu__trigger').addEventListener('click', () => {
|
|
menu__toggle(menuNav, menuOverlay);
|
|
});
|
|
|
|
menuOverlay.addEventListener('click', () => {
|
|
menu__toggle(menuNav, menuOverlay);
|
|
});
|
|
|
|
window.onresize = function () {
|
|
if (this.innerWidth >= 992) {
|
|
if (menuNav.classList.contains('active')) {
|
|
menu__toggle(menuNav, menuOverlay);
|
|
setTimeout(() => {
|
|
menu__reset(menu, menuNav);
|
|
menuChildren = [];
|
|
}, 300);
|
|
}
|
|
}
|
|
};
|
|
});
|