¿Cómo puedo crear un menú en HTML sin usar Javascript?

StackOverflow https://stackoverflow.com/questions/233251

  •  04-07-2019
  •  | 
  •  

Pregunta

Desde hace muchos años, una GUI estándar son las barras de menús de las aplicaciones con menús emergentes, si hace clic o desplaza una entrada en la barra de menús. Algunos sitios web implementan esta función también, pero están usando Javascript, por lo que puedo ver. Por diferentes motivos, Javascript puede ser un problema, entonces la pregunta: ¿es posible implementar esto sin Javascript, solo usando HTML y CSS?

¿Fue útil?

Solución

He hecho algo como esto antes, y es un truco que se logra al colocar los elementos del menú en etiquetas de anclaje, con submenús en divs ocultos DENTRO de esas etiquetas de anclaje. El truco de CSS es hacer que el div interno aparezca durante el evento a: hover.

Se parece a algo como: 

<style>
    A DIV { display: none; }
    A:hover DIV { display: block; }
</style>
<a href="blah.htm">
    Top Level Menu Text
    <div><ul>
        <li><a href="sub1.htm">Sub Item 1</a></li>
        <li><a href="sub2.htm">Sub Item 2</a></li>
        <li><a href="sub3.htm">Sub Item 3</a></li>
    </ul></div>
</a>

Su kilometraje puede variar ...

EDIT: Internet Explorer 6 e inferior NO admiten la: pseudoclase de desplazamiento en otros elementos además de A. En los navegadores más 'modernos', se acepta que se puede usar este truco con LI, TD, DIV, SPAN , y casi cualquier etiqueta.

Otros consejos

Echa un vistazo a CSS Menu Maker .

La técnica más conocida es el menús de suckerfish . Buscar eso resultará en muchos menús interesantes. Solo necesita javascript en IE6 e inferior.

Aquí hay una lista de los hijos de los menús del pez lechón.

Considere el uso de los métodos CSS como respaldo cuando JavaScript no esté disponible. JavaScript puede * proporcionar una mejor experiencia de usuario para los menús desplegables porque puede agregar algunos factores de retraso para detener la desaparición inmediata de los menús si el mouse abandona brevemente su área de desplazamiento. Los menús de CSS puro a veces pueden ser un poco difíciles de usar, especialmente si los objetivos de desplazamiento son pequeños.

*: por supuesto, no todos los scripts de menú se molestan en hacer esto ...

Puede utilizar la pseudoclase: desplazarse para obtener un efecto de desplazamiento. 

a:link {
 color: blue;
}

a:hover {
  color: red;
}

Puedo dar un ejemplo más extenso, pero no ahora (necesito llevar a los niños al dentista).

También hay un artículo original de Eric Meyer en menús de CSS puro .

Seguramente habrá mucho más robusto y moderno que ahora se menciona por otros, pero pensé en mencionarlo para la posteridad. :)

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top