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

Question

Desde hace muchos años, un estándar de GUI son las barras de menú 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 característica también, pero están usando Javascript, hasta donde puedo ver. Por diferentes razones, Javascript puede ser un problema, entonces la pregunta: ¿Es posible implementarlo sin Javascript, solo usando HTML y CSS?

Answer 1

He hecho algo así antes, y es un truco quitado colocando los elementos del menú en etiquetas de ancla, con los 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.

Parece algo así 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 inferiores no se admite el: hover pseudo-clase de otros elementos además A. En navegadores más 'modernos', se acepta poder usar este truco con LI, TD, DIV, SPAN y la mayoría de las etiquetas.

Answer 2

Puede utilizar la pseudoclass: pase el mouse para obtener un efecto de desplazamiento.

a:link { 
color: blue; 
} 

a:hover { 
    color: red; 
} 

puedo dar un ejemplo más extenso, pero no en este momento (necesidad de llevar a los niños al dentista).

Answer 3

Eche un vistazo a CSS Menu Maker.

Answer 4

La técnica más conocida es suckerfish menus. La búsqueda de eso dará como resultado muchos menús interesantes. Solo necesita javascript en IE6 e inferior.

Here's a list of the sons of the suckerfish menus.

Answer 5

considerar el uso de los métodos de CSS como una copia de seguridad para cuando JavaScript no está disponible. JavaScript puede * proporcionar una mejor experiencia de usuario para los menús desplegables porque puede agregar algunos factores de retardo para detener los menús que desaparecen inmediatamente si el mouse abandona brevemente su área de desplazamiento. Los menús Pure-CSS a veces pueden ser un poco difíciles de usar, especialmente si los objetivos de desplazamiento son pequeños.

*: Por supuesto, no todas las secuencias de comandos de menú en realidad se molestan en hacer esto ...

Answer 6

También hay Eric Meyer 's artículo original en pure CSS menus.

Seguramente habrá otras versiones más robustas y modernas que otros mencionaron, pero pensé que lo mencionaría para la posteridad. :)