Come creare un menu css drop down verticale di base

Riprendendo il tema dei menu a cascata e seguendo la stessa struttura del primo tutorial per creare un menu css dropdown orizzontale di base, basta modificare leggermente il suo stile css per creare un menu css a cascata verticale.

La marcatura html consiste sempre di una lista non-ordinata e liste innestate per i sub elementi del menu:

<div id="menu">
<ul>
<li><a href="#nogo">Link 1 >></a>
<ul>
<li><a href="#nogo">Link 1-1</a></li>
<li><a href="#nogo">Link 1-2</a></li>
</ul>
</li>
<li><a href="#nogo">Link 2 >></a>
<ul>
<li><a href="#nogo">Link 2-1</a></li>
<li><a href="#nogo">Link 2-2</a></li>
<li><a href="#nogo">Link 2-3</a></li>
</ul>
</li>
<li><a href="#nogo">Link 3</a></li>
<li><a href="#nogo">Link 4 >></a>
<ul>
<li><a href="#nogo">Link 4-1</a></li>
<li><a href="#nogo">Link 4-2</a></li>
<li><a href="#nogo">Link 4-3</a></li>
</ul>
</li>
</ul>
</div>

Nel seguente preview, possiamo vedere il nostro menu prima di applicare il stile css:

Per evitare le differenze d’interpretazione tra i browser riguardo i margini e spazi cuscinetti (padding), azzeriamo il tutto per le liste (<ul>) e suoi elementi (<li>):

#menu, #menu ul, #menu li{
padding:0;
margin:0;
}

Al contrario del la versione orizzontale, lo stile css principale viene applicato direttamente agli elementi ‘li’ invece dei link (elementi ‘a’).

• list-style: none; rimuove la marcatura di default delle liste
• position: relative; permette di potere di seguito posizionare la lista innestata in rapporto al suo elemento genitori (’li’ in questo caso)
• width:120px; e height: 30px; la larghezza e altezza dell’elemento che useremo come pulsante
• padding:0 20px; spazi cuscinetti sinistro/destro tra il bordo del elemento e il suo contenuto testo
• background-color: black; il colore di sfondo nero
• line-height: 30px; valore pare a l’altezza per centrate il contenuto testo verticalmente
• cursor:pointer; aggiunge a l’elemento il cursore tipico dei link

#menu li{
list-style: none;
position: relative;
width:120px;
height: 30px;
padding:0 20px;
background-color: black;
line-height: 30px;
cursor:pointer;
}

Preview del risultato fino adesso:

Con il text-decoration:none; e il color:white; togliamo la sottolineatura dei link e li diamo un colore di testo bianco:

#menu li a{
text-decoration:none;
color: white;
}

E per un minimo d’effetto visivo, cambiamo il colore di sfondo da nero a rosso degli elementi ‘li’ sullo stato hover (quando si passa sopra con il mouse):

#menu li:hover{
background-color:red;
}

Preview del risultato fino adesso:

Rimane di posizionare i sub elementi (ul innestati dentro l’ul principale) in modo assoluto a 160px (la larghezza impostata ai li + 40px padding sinistro/destro - vedi box-model per maggiore informazione) sulla sinistra del loro respettivo elemento genitore (li) e nasconderli in apertura con la proprietà visibility e il valore hidden (nascosto).

#menu ul ul{
position: absolute;
top:0;
left:160px;
visibility:hidden;
}

Finalmente, rendiamo i sub liste con i sub elementi visibile sullo stato hover dei li:

#menu ul li:hover ul{
visibility:visible;
}

Il risultato finale (passa sopra i link con il mouse):

Come spiegato alla fine del articolo sulla creazione d’un menu css dropdown orizzontale di base, questo menu richiede l’aggiunto d’un file .htc per il suo buon funzionamento con Internet Explorer 6, scaricabile gratuitamente sul sito del suo creatore Peter Nederloff e inserito nello stile css con:

body{
behavior: url(csshover2.htc);
}

PS: per utenti di IE6, questo file .htc non è applicato a l’esempio di sopra

Files di questo tutorial da scaricare gratuitamente (incluso file .htc):

  css_menu_dropdown_verticale_di_base.zip (2.7 KiB, 1,564 hits)

Condividi questo articolo su

css drop down menu, css dropdown, CSS Menu, css menu verticale

4 commenti

Rimani aggiornato con il RSS Feed