Manuel Cillero
423b30475b
Rrenombra clases, ajusta estilos CSS y actualiza la lógica de JavaScript para una mejor gestión de submenús.
97 lines
3 KiB
JavaScript
97 lines
3 KiB
JavaScript
function menu__showChildren(nav, children) {
|
|
const li = children[0];
|
|
const submenu = li.querySelector('.menu__children');
|
|
submenu.classList.add('active');
|
|
submenu.style.animation = 'slideLeft 0.5s ease forwards';
|
|
|
|
const labelEl = li.querySelector('.menu__label');
|
|
const title = labelEl ? labelEl.textContent.trim() : (li.querySelector('a')?.textContent?.trim() ?? '');
|
|
nav.querySelector('.menu__title').innerHTML = title;
|
|
nav.querySelector('.menu__header').classList.add('active');
|
|
}
|
|
|
|
function menu__hideChildren(nav, children) {
|
|
const submenu = children[0].querySelector('.menu__children');
|
|
submenu.style.animation = 'slideRight 0.5s ease forwards';
|
|
setTimeout(() => {
|
|
submenu.classList.remove('active');
|
|
submenu.style.removeProperty('animation');
|
|
}, 300);
|
|
|
|
children.shift();
|
|
if (children.length > 0) {
|
|
const a = children[0].querySelector('a');
|
|
const title = (a && a.textContent ? a.textContent.trim() : '');
|
|
nav.querySelector('.menu__title').textContent = title;
|
|
} else {
|
|
nav.querySelector('.menu__header').classList.remove('active');
|
|
nav.querySelector('.menu__title').textContent = '';
|
|
}
|
|
}
|
|
|
|
function menu__toggle(nav, overlay) {
|
|
nav.classList.toggle('active');
|
|
overlay.classList.toggle('active');
|
|
}
|
|
|
|
function menu__reset(menu, nav, overlay) {
|
|
menu__toggle(nav, overlay);
|
|
setTimeout(() => {
|
|
nav.querySelector('.menu__header').classList.remove('active');
|
|
nav.querySelector('.menu__title').innerHTML = '';
|
|
menu.querySelectorAll('.menu__children').forEach(submenu => {
|
|
submenu.classList.remove('active');
|
|
submenu.style.removeProperty('animation');
|
|
});
|
|
}, 300);
|
|
return [];
|
|
}
|
|
|
|
document.querySelectorAll('.menu').forEach(menu => {
|
|
|
|
let menuChildren = [];
|
|
const menuNav = menu.querySelector('.menu__nav');
|
|
const menuOverlay = menu.querySelector('.menu__overlay');
|
|
|
|
menu.querySelector('.menu__list').addEventListener('click', (e) => {
|
|
if (menuNav.classList.contains('active')) {
|
|
let target = e.target.closest('.menu__item--children');
|
|
if (target && target != menuChildren[0]) {
|
|
menuChildren.unshift(target);
|
|
menu__showChildren(menuNav, menuChildren);
|
|
}
|
|
}
|
|
});
|
|
|
|
menu.querySelector('.menu__back').addEventListener('click', () => {
|
|
menu__hideChildren(menuNav, menuChildren);
|
|
});
|
|
|
|
menu.querySelector('.menu__close').addEventListener('click', () => {
|
|
menuChildren = menu__reset(menu, menuNav, menuOverlay);
|
|
});
|
|
|
|
menu.querySelectorAll('.menu__item--link > a[target="_blank"]').forEach(link => {
|
|
link.addEventListener('click', (e) => {
|
|
menuChildren = menu__reset(menu, menuNav, menuOverlay);
|
|
e.target.blur();
|
|
});
|
|
});
|
|
|
|
menu.querySelector('.menu__trigger').addEventListener('click', () => {
|
|
menu__toggle(menuNav, menuOverlay);
|
|
});
|
|
|
|
menuOverlay.addEventListener('click', () => {
|
|
menu__toggle(menuNav, menuOverlay);
|
|
});
|
|
|
|
window.onresize = function () {
|
|
if (menuNav.classList.contains('active')) {
|
|
var fontSizeRoot = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
if (this.innerWidth >= 62 * fontSizeRoot) {
|
|
menuChildren = menu__reset(menu, menuNav, menuOverlay);
|
|
}
|
|
}
|
|
};
|
|
});
|