Come posso creare un menu in HTML senza usare Javascript?

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

  •  04-07-2019
  •  | 
  •  

Domanda

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

È stato utile?

Soluzione

Ho già fatto qualcosa del genere prima, ed è un trucco realizzato posizionando le voci di menu nei tag di ancoraggio, con sottomenu in div nascosti all'interno di quei tag di ancoraggio. Il trucco CSS è far apparire il div interno durante l'evento a: hover.

Sembra qualcosa del tipo: 

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

Il tuo chilometraggio può variare ...

EDIT: Internet Explorer 6 e versioni precedenti NON supportano la pseudo-classe: hover su altri elementi oltre a A. Nei browser più "moderni", si accetta di poter usare questo trucco con LI, TD, DIV, SPAN e quasi tutti i tag.

Altri suggerimenti

Dai un'occhiata a CSS Menu Maker .

La tecnica più conosciuta è il menu di pesce ventre . La ricerca di questo porterà a molti menu interessanti. Ha solo bisogno di JavaScript in IE6 e inferiori.

Ecco un elenco dei figli dei menu del pollone.

Prendi in considerazione l'utilizzo dei metodi CSS come backup per quando JavaScript non è disponibile. JavaScript può * fornire un'esperienza utente migliore ai menu a discesa perché è possibile aggiungere alcuni fattori di ritardo per impedire che i menu scompaiano immediatamente se il mouse lascia brevemente la loro area al passaggio del mouse. I menu Pure-CSS a volte possono essere un po 'difficili da usare, specialmente se gli obiettivi al passaggio del mouse sono piccoli.

*: ovviamente, non tutti gli script di menu si preoccupano di farlo ...

Puoi usare la pseudoclasse: hover per ottenere un effetto hover. 

a:link {
 color: blue;
}

a:hover {
  color: red;
}

Posso fare un esempio più ampio ma non ora (devo portare i bambini dal dentista).

C'è anche l'articolo originale di Eric Meyer su menu CSS puri .

Ci sono sicuramente molto più robusti e moderni, ora citati da altri, ma ho pensato di menzionarli per i posteri. :)

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top