El resultado debería ser un menú de hamburguesas con diapositivas desde la derecha al hacer clic en el icono.
Este es el código para el menú principal donde lo traduzco a la derecha al 100 % y cuando hago clic en el icono se traduce de nuevo al 0 % y lo muestra en la pantalla.
HTML
<div id="mobilenav" class="mobile-nav"> <div class="mobile-nav-header"> </div> <div class="hamburger"> <button (click)="closeMenu()"> <img src="../../assets/icons/close-menu.svg" alt="" /> </button> </div> </div> <ul class="links"> </ul> <div class="socials"> </div> </div> .mobile-nav { height: 100vh; top: 0; position: absolute; transform: translateX(100%); right: 0; transition: 0.5s; background: white; z-index: 99; }el js
openMenu() { var mobile_menu = document.getElementById('mobilenav'); mobile_menu!.style.transform = 'translateY(0px)'; // mobile_menu!.style.display = 'block'; } closeMenu() { var mobile_menu = document.getElementById('mobilenav'); mobile_menu!.style.transform = 'translateX(100%)'; // mobile_menu!.style.display = 'none'; }El problema es que cuando está cerrado, todavía es posible que el usuario se desplace horizontalmente hacia la derecha. Eso no debería ser posible ya que el menú debería estar oculto y no debería haber posibilidad de desplazarse horizontalmente.
La forma más sencilla es reemplazar position: absolute con position: fixed . Esto soluciona el problema pero aún permite que la página se pueda desplazar horizontalmente si es necesario.
Alternativamente, podría agregar
body { overflow-x: hidden; }para eliminar la barra de desplazamiento horizontal.