1

tengo el siguiente elemento:

<span><a href="#"><i class="fas fa-bars" id="boton_abrir" class="btn-menu"></i></a></span>

Es un botón con el cual quiero abrir una sidebar desplegable y que esta empuje el contenido dentro de la página, por ej:

<!DOCTYPE html>
<html>
<head>
    <title>Sidebar</title>
    <meta charset="utf-8">

</head>
<body>
   <nav class="sidebar">
      <div>
         <p>HOLA MUNDO</p>
      </div>
   </nav>

   <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>

Que función en JS podría aplicar para que la barra se cerrara y abriera al hacer click sobre el botón?

4
  • 2
    Te podría servir el método toggle en el sidebar : sidebar.classList.toggle("visible"), aquí el link de la documentación: developer.mozilla.org/es/docs/Web/API/Element/classList
    – davidbug
    Commented el 22 may. 2021 a las 19:21
  • Puedes solo cambiarle el ancho a 0 y 100% y para darle el efecto que sale de un lado, agregarle una transición con css.
    – Ange Reyna
    Commented el 22 may. 2021 a las 19:23
  • Intente aplicar el toggle pero no se como plantear el cogido. No me genera ninguna respuesta.
    – nicocarro
    Commented el 22 may. 2021 a las 19:29
  • 1
    Que tal nicocarro, el toggle es la función que deberías usar, no existe una función que te solucione el problema como si de una varita mágica se tratase. Hazte una clase con los cambios que quisieran que haya cuando actives el botón y con la función toggle lo agregas y lo quitas, con eso tendrás la solución. Ten en cuenta que tu código CSS es muy importante para lograrlo. Commented el 22 may. 2021 a las 20:04

1 respuesta 1

1

Con javascript sería así:

const boton = document.getElementById('.boton_abrir');
const sidebar = document.querySelector(".sidebar");

boton.addEventListener("click", function() {
 
 sidebar.classList.toggle("active");
 
}

Con jQuery:

$(document).ready(function() {
 $(".boton_abrir").on("click", function() {
  $(".sidebar").slideToggle().addClass(".active");
 }
})

Y el estilo CSS:

.sidebar {
  height: 0;
  visibility: hidden;
  -webkit-transition: height 0.3s ease-in-out;
  transition: height 0.3s ease-in-out;
}

.sidebar.active {
 visibility: visible;
 height: auto; /* ó el la altura que quieras */
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.