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, 3,462 hits)
About The Author
Aalvo
Kome si modifica o si abbelisce qesto menù?
Onsitus
Ciao Aalvo,
dipende che ne vuoi fare. Un esempio basato su questo tutorial: http://css.flepstudio.org/css-menu/menu-dropdown-colorato-3.html
Magari ti da qualche idee. Se hai domande piu specifiche, chiedi pure!
Marcello Oliva
Ciao, vorrei modificare la mia home page con un effetto di dissolvenza delle immagini (attualmente funziona solo con explorer).
Ci sono riuscito con
Ultimate Fade-In Slideshow (v1.51), no problem..
Il problema è che se inserisco questo oggetto il mio menu a tendina quando evidenziato, viene in parte nascosto (nella parte bassa) dalle foto in dissolvenza. Il problema si risolve abbassando le foto in dissolvenza, ma mi rimane dello spazio vuoto..
Non si riesce a dare una caratteristica al css del menu, per cui rimanga sempre in evidenza su ogni oggetto sottostante?
grazie, Marcello
Onsitus
Ciao Marcello, sarebbe per la home page del sito marcellooliva.com?
Se si, non ho incontrato problemi tra menu dropdown e slideshow.
Se no, sarebbe da cambiare i z-index. Uno più alto per il menu, uno più basso per il slideshow.
Marcello Oliva
Ciao Onsitus, grazie per la risposta.
Si era per http://www.marcellooliva.com.
Lo hai visualizzato correttamente in quanto probabilmente lo avevo già messo a posto….
Ho avuto non pochi problemi con i valori dello z-index al fine di visualizzare correttamente il menu su tutti i browser + comuni…. comunque mi sembra di esserci riuscito…
Grazie! ciao, Marcello
Marcello Oliva
Ciao a tutti, ho un’altro problema.
In questo caso è un problema di visualizzazione su IPhone.
Il menu a tendina non è visualizzato. All’inizio pensavo fosse legato al telefono che non interpreta correttamente lo script, ma poi ho visto che menu simili sono visualizzati correttamente…
Avete qualche suggerimento su come modificare il css dedicato all’IPhone?
grazie1000
Marcello
Enrico
Come posso evitare che si sovrapponga ad altri elementi della pagina?
Alessio
Ciao, sto allestendo un sito (quello che ho indicato), attualmente è in fase di preparazione. Il mio problema è questo: quando passo il mouse sul link del menu verticale, nel codice che link del sito devo inserire?
Federico
Ciao! Ho tentato di mettere il tuo menu, personalizzandolo, in http://www.bostro.net ma non funziona con Internet Explorer! Se copio papale papale il codice in un file a parte, funziona, ma se lo integro nel codice del mio sito internet explorer (8) non apre le tendine. C’è qualche conflitto con qualche altro componente css che puoi suggerirmi? Il mio sito ha un css in cui NON ci sono tag div, e il menu è integrato in una tabella…
Mariano Campajola
ma come si inserisce il css in un documento html?
scusate se ,forse, ho formulato male la domanda.
kirti maurya
I want to make a horizontal drop down menubar and just below it in extreme left a vertical drop down menu bar. I applied css coding for it. It works seperately but when i use coding for both type of drop down menu the sub menu of upper horizontal menu bar goes beneath the vertical menu bar. how it can be resolved.
Mariano Campajola
grazie delle tante risposte e comunque ho risolto.
roberto
ciao e complimenti!!!
e’ un ottimo menu semplice per i neofiti
solo una domanda:
vorrei far cambiare il colore del testo quando il mouse e’ sopra al bottone
come posso fare?
grazie
Roberto