manuelcillero/pagetop
manuelcillero/pagetop
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

🩹 Fix submenus position after window resize

Browse source
This commit is contained in:
Manuel Cillero 2023-10-15 12:23:46 +02:00
parent 4d69c185e0
commit c2ea399635
1 changed files with 18 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

23
pagetop/static/theme/js/menu.js
View file

@ -13,6 +13,7 @@ function menuHideChildren(nav, children) {
submenu.style.animation = 'slideRight 0.5s ease forwards';
setTimeout(() => {
submenu.classList.remove('active');
submenu.style.removeProperty("animation");
}, 300);
children.shift();
@ -30,6 +31,15 @@ function menuToggle(nav, overlay) {
overlay.classList.toggle('active');
}
function menuReset(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 = [];
@ -46,20 +56,19 @@ document.querySelectorAll('.menu-container').forEach(menu => {
menuShowChildren(menuNav, menuChildren);
}
});
menu.querySelector('.menu-arrow').addEventListener('click', () => {
menuHideChildren(menuNav, menuChildren);
});
menu.querySelector('.menu-close').addEventListener('click', () => {
menuToggle(menuNav, menuOverlay);
menuReset(menu, menuNav);
setTimeout(() => {
menuNav.querySelector('.menu-header').classList.remove('active');
menuNav.querySelector('.menu-title').innerHTML = '';
menu.querySelectorAll('.menu-subs').forEach(close => {
close.classList.remove('active');
});
menuChildren = [];
}, 300);
});
menu.querySelector('.menu-trigger').addEventListener('click', () => {
menuToggle(menuNav, menuOverlay);
});
@ -72,6 +81,10 @@ document.querySelectorAll('.menu-container').forEach(menu => {
if (this.innerWidth >= 992) {
if (menuNav.classList.contains('active')) {
menuToggle(menuNav, menuOverlay);
menuReset(menu, menuNav);
setTimeout(() => {
menuChildren = [];
}, 300);
}
}
};