fix burguer menu
This commit is contained in:
+58
-10
@@ -308,27 +308,75 @@ h4 { font-size: 1.25rem; }
|
||||
}
|
||||
|
||||
/* --- Menú Móvil Overlay --- */
|
||||
.mobile-menu-drawer {
|
||||
/* --- Overlay oscuro detrás del drawer --- */
|
||||
.mobile-menu-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
left: 0;
|
||||
inset: 0;
|
||||
background-color: rgba(10, 24, 32, 0.55);
|
||||
backdrop-filter: blur(3px);
|
||||
-webkit-backdrop-filter: blur(3px);
|
||||
z-index: 998;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.mobile-menu-overlay.is-open {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* --- Drawer lateral derecho --- */
|
||||
.mobile-menu-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: min(320px, 85vw);
|
||||
background-color: var(--bg-surface);
|
||||
border-left: 1px solid var(--border-color);
|
||||
padding: 2rem 1.5rem;
|
||||
overflow-y: auto;
|
||||
z-index: 999;
|
||||
border-top: 1px solid var(--border-color);
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: -8px 0 32px rgba(10, 24, 32, 0.18);
|
||||
}
|
||||
|
||||
.mobile-menu-drawer.is-open {
|
||||
display: block;
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* Cabecera del drawer con botón cerrar */
|
||||
.drawer-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1.25rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.drawer-close-btn {
|
||||
background: var(--bg-subtle);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-main);
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: var(--radius-full);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.drawer-close-btn:hover {
|
||||
background: var(--border-color);
|
||||
color: var(--ide-accent);
|
||||
}
|
||||
|
||||
.mobile-nav-links {
|
||||
|
||||
+22
-5
@@ -64,8 +64,23 @@
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Menú Desplegable para Móviles -->
|
||||
<div id="mobile-menu-drawer" class="mobile-menu-drawer">
|
||||
<!-- Overlay oscuro -->
|
||||
<div id="mobile-menu-overlay" class="mobile-menu-overlay"></div>
|
||||
|
||||
<!-- Drawer lateral -->
|
||||
<div id="mobile-menu-drawer" class="mobile-menu-drawer" aria-hidden="true">
|
||||
|
||||
<div class="drawer-header">
|
||||
<img src="assets/img/logo-on-light.png" alt="IDE Consultores" class="brand-logo-img logo-light-only" style="height:32px;">
|
||||
<img src="assets/img/logo-on-dark.png" alt="IDE Consultores" class="brand-logo-img logo-dark-only" style="height:32px;">
|
||||
<button id="drawer-close-btn" class="drawer-close-btn" aria-label="Cerrar menú">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ul class="mobile-nav-links">
|
||||
<li><a href="index.html" class="nav-link">Inicio</a></li>
|
||||
<li><a href="desafios.html" class="nav-link">Desafíos</a></li>
|
||||
@@ -74,10 +89,12 @@
|
||||
<li><a href="ide-academy.html" class="nav-link">IDE Academy</a></li>
|
||||
<li><a href="insights.html" class="nav-link">Insights</a></li>
|
||||
<li><a href="somos-ide.html" class="nav-link">Somos IDE</a></li>
|
||||
<li><a href="contacto.html" class="nav-link" style="color: var(--ide-accent);">Contacto Comercial</a></li>
|
||||
<li><a href="trabaja-con-nosotros.html" class="nav-link">Trabaja con nosotros</a></li>
|
||||
<li><a href="contacto.html" class="nav-link" style="color: var(--ide-accent);">Contacto Comercial</a></li>
|
||||
</ul>
|
||||
<div style="margin-top: 2rem;">
|
||||
<a href="contacto.html" class="btn btn-primary w-full" style="width: 100%;">HABLEMOS</a>
|
||||
|
||||
<div style="margin-top: auto; padding-top: 2rem; border-top: 1px solid var(--border-color);">
|
||||
<a href="contacto.html" class="btn btn-primary" style="width: 100%; justify-content: center;">HABLEMOS</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
+41
-18
@@ -80,7 +80,7 @@ function highlightActiveNavLink() {
|
||||
}
|
||||
|
||||
function attachHeaderEvents() {
|
||||
// Switch de Tema: usar clonación para evitar listeners duplicados
|
||||
// Theme toggle
|
||||
const themeToggle = document.getElementById('theme-toggle-btn');
|
||||
if (themeToggle) {
|
||||
const newThemeToggle = themeToggle.cloneNode(true);
|
||||
@@ -88,25 +88,48 @@ function attachHeaderEvents() {
|
||||
newThemeToggle.addEventListener('click', toggleTheme);
|
||||
}
|
||||
|
||||
// Botón de menú móvil y cierre del drawer: event delegation global.
|
||||
// Evita depender de un nodo único (el header se inyecta de forma modular),
|
||||
// de modo que funcione aunque el botón sea reemplazado por cloneNode.
|
||||
const mobileDrawer = document.getElementById('mobile-menu-drawer');
|
||||
const drawer = document.getElementById('mobile-menu-drawer');
|
||||
const overlay = document.getElementById('mobile-menu-overlay');
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
const toggleClicked = e.target.closest('#mobile-menu-btn');
|
||||
const insideDrawer = mobileDrawer && mobileDrawer.contains(e.target);
|
||||
function openDrawer() {
|
||||
if (!drawer) return;
|
||||
drawer.classList.add('is-open');
|
||||
drawer.setAttribute('aria-hidden', 'false');
|
||||
if (overlay) overlay.classList.add('is-open');
|
||||
document.body.style.overflow = 'hidden'; // evita scroll del fondo
|
||||
const btn = document.getElementById('mobile-menu-btn');
|
||||
if (btn) btn.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
|
||||
if (toggleClicked) {
|
||||
if (mobileDrawer) {
|
||||
const isOpen = mobileDrawer.classList.toggle('is-open');
|
||||
toggleClicked.setAttribute('aria-expanded', isOpen);
|
||||
}
|
||||
} else if (mobileDrawer && mobileDrawer.classList.contains('is-open') && !insideDrawer) {
|
||||
mobileDrawer.classList.remove('is-open');
|
||||
const toggle = document.querySelector('#mobile-menu-btn');
|
||||
if (toggle) toggle.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
function closeDrawer() {
|
||||
if (!drawer) return;
|
||||
drawer.classList.remove('is-open');
|
||||
drawer.setAttribute('aria-hidden', 'true');
|
||||
if (overlay) overlay.classList.remove('is-open');
|
||||
document.body.style.overflow = '';
|
||||
const btn = document.getElementById('mobile-menu-btn');
|
||||
if (btn) btn.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
|
||||
// Botón hamburguesa abre
|
||||
document.getElementById('mobile-menu-btn')
|
||||
?.addEventListener('click', openDrawer);
|
||||
|
||||
// Botón X dentro del drawer cierra
|
||||
document.getElementById('drawer-close-btn')
|
||||
?.addEventListener('click', closeDrawer);
|
||||
|
||||
// Clic en overlay cierra
|
||||
if (overlay) overlay.addEventListener('click', closeDrawer);
|
||||
|
||||
// Clic en cualquier link del drawer cierra
|
||||
drawer?.querySelectorAll('.nav-link').forEach(link => {
|
||||
link.addEventListener('click', closeDrawer);
|
||||
});
|
||||
|
||||
// Tecla ESC cierra
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') closeDrawer();
|
||||
});
|
||||
|
||||
const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
|
||||
|
||||
Binary file not shown.
Reference in New Issue
Block a user