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

🎨 Mejora la estructura y estilos del menú

Browse source 
Rrenombra clases, ajusta estilos CSS y actualiza la lógica de JavaScript
para una mejor gestión de submenús.
This commit is contained in:
Manuel Cillero 2025-09-29 02:07:10 +02:00
parent c0577a0773
commit 423b30475b
8 changed files with 84 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

21
static/js/menu.js
View file

@ -1,15 +1,17 @@
function menu__showChildren(nav, children) {
let submenu = children[0].querySelector('.menu__subs');
const li = children[0];
const submenu = li.querySelector('.menu__children');
submenu.classList.add('active');
submenu.style.animation = 'slideLeft 0.5s ease forwards';
let title = children[0].querySelector('i').parentNode.childNodes[0].textContent;
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) {
let submenu = children[0].querySelector('.menu__subs');
const submenu = children[0].querySelector('.menu__children');
submenu.style.animation = 'slideRight 0.5s ease forwards';
setTimeout(() => {
submenu.classList.remove('active');
@ -18,11 +20,12 @@ function menu__hideChildren(nav, children) {
children.shift();
if (children.length > 0) {
let title = children[0].querySelector('i').parentNode.childNodes[0].textContent;
nav.querySelector('.menu__title').innerHTML = title;
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').innerHTML = '';
nav.querySelector('.menu__title').textContent = '';
}
}
@ -36,7 +39,7 @@ function menu__reset(menu, nav, overlay) {
setTimeout(() => {
nav.querySelector('.menu__header').classList.remove('active');
nav.querySelector('.menu__title').innerHTML = '';
menu.querySelectorAll('.menu__subs').forEach(submenu => {
menu.querySelectorAll('.menu__children').forEach(submenu => {
submenu.classList.remove('active');
submenu.style.removeProperty('animation');
});
@ -52,7 +55,7 @@ document.querySelectorAll('.menu').forEach(menu => {
menu.querySelector('.menu__list').addEventListener('click', (e) => {
if (menuNav.classList.contains('active')) {
let target = e.target.closest('.menu__children');
let target = e.target.closest('.menu__item--children');
if (target && target != menuChildren[0]) {
menuChildren.unshift(target);
menu__showChildren(menuNav, menuChildren);
@ -68,7 +71,7 @@ document.querySelectorAll('.menu').forEach(menu => {
menuChildren = menu__reset(menu, menuNav, menuOverlay);
});
menu.querySelectorAll('.menu__link > a[target="_blank"]').forEach(link => {
menu.querySelectorAll('.menu__item--link > a[target="_blank"]').forEach(link => {
link.addEventListener('click', (e) => {
menuChildren = menu__reset(menu, menuNav, menuOverlay);
e.target.blur();