hace unos dias termine un menu responsive para mi pagina web, el problema es que al "esconderse" utilizando la propiedad de
right:-380px;
Este menu se oculta de forma correcta, pero toda la web me queda con un overflow y, es decir, se puede scrolear hacia el costado, tenia entendido que al tener la propiedad de position absolute, esto no deberia pasar, dejo el codigo:
header nav ul:nth-child(1) {
display: none;
}
header nav .responsive {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
header .responsive-menu { // Este es el menu responsive, empieza en -320px a la derecha para la animacion
position: absolute;
right: -320px;
width: 320px;
height: 93.2vh;
background: #aa6ff8;
-webkit-transition: 320ms;
transition: 320ms;
margin-top: -1px;
}
header .hide { //Este es el codigo que se agrega al hacer click en el boton
right: 0;
}
Codigo JS:
function responsive(){
let responsive = document.getElementById("menu-responsive")
console.log(responsive)
if (responsive.classList.contains("hide")){
responsive.classList.remove("hide")
} else {
responsive.classList.add("hide");
}
}
Y el HTML:
<header>
<nav>
<ul>
<li><a class="active" href="index.html">Sobre nosotros</a></li>
<li><a href="index.html">Servicios</a></li>
<li><a href="index.html">Contacto</a></li>
<button>Ingresar</button>
<button>Registrarse</button>
</ul>
<button onclick="responsive()" class="icon"></button>
</nav>
<div id="menu-responsive" class="responsive-menu hide">
</div>
La animacion y el boton funcionan correctamente, solo que no logro comprender el por que del overflow, muchas gracias de antemano por la ayuda.
overflow: hidden
debería quitar el scroll