Crear un menú deslizante
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>