Come posso creare un menu in HTML senza usare Javascript?

Question

Da molti anni uno standard GUI sono le barre dei menu delle applicazioni con i menu che spuntano, se si fa clic o si passa sopra una voce nella barra dei menu. Alcuni siti web implementano anche questa funzione, ma stanno usando Javascript, per quanto posso vedere. Per diversi motivi, Javascript può essere un problema, quindi la domanda: è possibile implementare senza Javascript, usando solo HTML e CSS?

Answer 1

Ho già fatto qualcosa del genere, ed è un trucco ottenuto posizionando gli elementi del menu nei tag di ancoraggio, con i sottomenu nelle div nascoste DENTRO quelle etichette di ancoraggio. Il trucco CSS consiste nel far apparire il div interno durante l'evento a: hover.

Sembra qualcosa di simile:

<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> 

tua situazione potrebbe essere diversa ...

EDIT: Internet Explorer 6 e inferiori non supportano il: hover pseudo-classe su altri elementi oltre A. più browser 'moderni', si accetta di essere in grado di utilizzare questo trucco con LI, TD, DIV, SPAN e la maggior parte dei tag.

Answer 2

È possibile utilizzare la pseudoclass: passa il mouse per ottenere un effetto di passaggio del mouse.

a:link { 
color: blue; 
} 

a:hover { 
    color: red; 
} 

posso dare un più ampio esempio, ma non in questo momento (necessità di ottenere i bambini dal dentista).

Answer 3

Dai un'occhiata allo CSS Menu Maker.

Answer 4

La tecnica più nota è la suckerfish menus. La ricerca di ciò comporterà un sacco di menu interessanti. Ha solo bisogno di javascript in IE6 e versioni precedenti.

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

Answer 5

considerare l'utilizzo di metodi CSS come backup per quando JavaScript non è disponibile. JavaScript può * fornire un'esperienza utente migliore per i menu a discesa perché è possibile aggiungere alcuni fattori di ritardo per interrompere i menu che scompaiono immediatamente se il mouse lascia brevemente la propria area al passaggio del mouse. I menu Pure-CSS a volte possono essere un po 'complicati da usare, specialmente se i target hover sono piccoli.

*: ovviamente, non tutti gli script di menu in realtà si preoccupano di fare questo ...

Answer 6

C'è anche Eric Meyer s' Articolo originale su pure CSS menus.

Ci sono sicuramente molto più robusti e moderni che vengono portati là fuori ora citati da altri, ma ho pensato di parlarne per i posteri. :)