Crear un menú deslizante
Crea un menú que se abra/colapse al hacer click:
P.D. El HTML/CSS del documento fuente se debe modificar.
HTML/CSS
Primero hay que crear el HTML y CSS.
Un menú es un componente gráfico independiente en la página, por lo que es mejor colocarlo en un solo elemento del DOM.
Una lista de elementos del menú se puede diseñar como una lista ul/li
.
Aquí está la estructura de ejemplo:
<div class="menu">
<span class="title">Sweeties (click me)!</span>
<ul>
<li>Cake</li>
<li>Donut</li>
<li>Honey</li>
</ul>
</div>
Usamos <span>
para el título, porque <div>
tiene un display:block
implícito en él, y va a ocupar 100% del ancho horizontal.
Así:
<div style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</div>
Entonces si establecemos onclick
en él, detectará los clics a la derecha del texto.
Como <span>
tiene un display: inline
implícito, ocupa exactamente el lugar suficiente para que quepa todo el texto:
<span style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</span>
Alternar el menú
Alternar el menú debería cambiar la flecha y mostrar/ocultar la lista del menú.
Todos estos cambios son perfectamente controlados con CSS. En JavaScript debemos etiquetar el estado actual del menú agregando/eliminando la clase .open
.
Sin él, el menú se cerrará:
.menu ul {
margin: 0;
list-style: none;
padding-left: 20px;
display: none;
}
.menu .title::before {
content: '▶ ';
font-size: 80%;
color: green;
}
…Y con .open
la flecha cambia y aparece la lista:
.menu.open .title::before {
content: '▼ ';
}
.menu.open ul {
display: block;
}