Técnica de navegación B
Height
animado
con JS
JavaScript mide la altura real del contenido y la aplica como valor exacto en el CSS. La transición interpola entre 0 y la altura medida.
01
El problema con max-height
Usar
max-height: 400px funciona pero el easing es impreciso porque el navegador interpola desde un valor arbitrario. El resultado es una animación que "acelera tarde".02
La solución: medir con JS
JS mide
menu.scrollHeight y asigna ese valor exacto como height. La transición CSS interpola entre 0 y el valor real, consiguiendo un easing perfecto.
// JS: medir la altura real y asignarla
// El wrapper empieza con height: 0 y overflow: hidden
function toggleNav() {
const wrap = document.getElementById('nav-wrap');
const menu = wrap.querySelector('ul');
const isOpen = wrap.classList.contains('open');
if (isOpen) {
// Cerrar: primero fijar height explícita, luego → 0
wrap.style.height = wrap.scrollHeight + 'px';
requestAnimationFrame(() => { wrap.style.height = '0'; });
} else {
// Abrir: height exacta del contenido
wrap.style.height = menu.scrollHeight + 'px';
}
wrap.classList.toggle('open', !isOpen);
}
// El wrapper empieza con height: 0 y overflow: hidden
function toggleNav() {
const wrap = document.getElementById('nav-wrap');
const menu = wrap.querySelector('ul');
const isOpen = wrap.classList.contains('open');
if (isOpen) {
// Cerrar: primero fijar height explícita, luego → 0
wrap.style.height = wrap.scrollHeight + 'px';
requestAnimationFrame(() => { wrap.style.height = '0'; });
} else {
// Abrir: height exacta del contenido
wrap.style.height = menu.scrollHeight + 'px';
}
wrap.classList.toggle('open', !isOpen);
}