MonARo

/* 1. Estilo de la Hamburguesa */ .menu-toggle { display: flex; flex-direction: column; justify-content: space-between; width: 35px; height: 25px; cursor: pointer; z-index: 9999; position: relative; } .bar { height: 3px; width: 100%; background-color: #FFFFFF; transition: all 0.3s ease; } /* Animación de las 3 líneas transformándose en una 'X' */ .menu-toggle.active .bar:nth-child(1) { transform: translateY(11px) rotate(45deg); } .menu-toggle.active .bar:nth-child(2) { opacity: 0; } .menu-toggle.active .bar:nth-child(3) { transform: translateY(-11px) rotate(-45deg); } /* 2. Estilo del fondo del Menú Desplegable */ .full-screen-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(255, 255, 255, 0.98); /* Fondo blanco casi opaco */ display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: all 0.4s ease; z-index: 9998; } .full-screen-menu.open { opacity: 1; visibility: visible; } /* 3. Estructura y diseño de los botones (Times New Roman) */ .navigation-menu { display: flex; flex-direction: column; /* Apilados en vertical */ align-items: center; gap: 50px; /* Separación entre los botones */ font-family: "Times New Roman", Times, serif; } .nav-button { text-decoration: none; color: #000; font-size: 3.5rem; /* Tamaño rotundo para que luzca al abrir el menú */ font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; /* Permite el escalado fluido */ display: inline-block; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; } /* Efecto Hover: Escalar a 1.2 sin cambiar de texto */ .nav-button:hover { transform: scale(1.2); } /* Ajuste para móviles */ @media (max-width: 768px) { .nav-button { font-size: 2.2rem; } .navigation-menu { gap: 40px; } } // Lógica para abrir y cerrar el menú const toggle = document.getElementById('mobile-menu-toggle'); const menu = document.getElementById('full-screen-menu'); const links = document.querySelectorAll('.nav-button'); toggle.addEventListener('click', () => { toggle.classList.toggle('active'); menu.classList.toggle('open'); // Bloquear el scroll de la página cuando el menú está abierto document.body.style.overflow = menu.classList.contains('open') ? 'hidden' : 'auto'; }); // Cerrar el menú automáticamente al hacer clic en uno de los enlaces links.forEach(link => { link.addEventListener('click', () => { toggle.classList.remove('active'); menu.classList.remove('open'); document.body.style.overflow = 'auto'; }); });
GALERÍA
VIDEO
REVISTA