Primero necesitamos una imagen o ícono del famoso botón de tres barras, para eso te recomiendo Fonts Awesome o Google Fonts, en caso que uses Font Awesome, te recuerdo que tendrás que crear tu kit y agregarlo al head de tu código html.
Empezaremos creando la estructura básica del html:
<!DOCTYPE html><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body>```
Luego crearemos los elementos para el botón y el div que queremos que contenga la lista de elementos que se deben mostrar al hacer click o tap al botón en nuestra página:
<main>
<div class=“toggle-button-container”>
<span id=“button”><i class=“fa-solid fa-bars”></i></span>
</div>
<div id=“Displayable” class=“div-que-aparece”>
<ul>
<li>elemento 1</li>
<li>elemento 2</li>
</ul>
</div>
</main>
Normalmente este botónirá enla etiqueta <header>, pero por ahora, escribirás el main y su contenido dentro del body.
Verás que yo agregué la clases a esos elementos, y ahora con la etiqueta <Style></style> que va ubicada en el head, daremos propiedades a cada una de esas clases, y añadiremos una clase llamada "show" para que al darle click al botón, se le agregue esa clase al div y así se muestre, quedaría algo así:
<style>
.div-que-aparece{
display: none;
}
.show{
display: block;
}
#Displayable{
height: 100px;
width: 100px;
background: blanchedalmond;
}
</style>```
Como verás, ahora el div que contiene la lista no se verá, porque a la clase “div-que-aparece” le dimos un display:none;
Y si notas, la clase show, aún no está agregada al div, porque sólo se le agregará al darle click al botón, para eso, agregaramos debajo de la etiqueta main la etiqueta script, que lo que hace es permitirnos insertar código de JavaScript en nuestro html, dentro de ella escribiremos:
<script>
const toggleIcon = document.getElementById('button');
const displayableDiv = document.getElementById('Displayable');
const body = document.body;
toggleIcon.addEventListener('click', () => {
displayableDiv.classList.toggle('show');
displayableDiv.classList.toggle('div-que-aparece');
});
</script>```
Con GetElementById lo que hicimos es almacenar ese elemento de html en una variable de javascript, así que cada vez que llamemos a esa variable llamamos al elemento.
Verás que al contenedor del Botón le añadimos con js un EventListener, de tipo click, así que cada vez quese interactúe con él mediante un click, al div que contiene la lista se le agrega la clase show y se le quita la clase div-que-aparece, y así el div tiene un display:block; solo cuando clickeamos el botón y un display:none; cuando repetimos la operación, recuerda que puedes estilizar la lista y todos los elementos como quieras.
