Sei in: Home >>Tutorials >>Programmazione >>Css (Cascading Style Sheets) ovvero Fogli di Stile

Menu di navigazione verticale a tendina con i fogli di stile CSS

Ultimo aggiornamento: 15 marzo 2007

Si tratta di una semplicissima lista con delle sottoliste che costituiscono i menu a tendina.

Osservando l'esempio si nota che i pulsanti sono dati dalla stessa immagine ripetuta, pertanto bisogna prima di tutto preparare due immagini adatte al pulsante, una per lo stato di riposo e una per l'effetto rollover: il testo dei pulsanti è quello che nella lista corrisponde alle parole "menu1", "menu2", ecc.

Fatto questo, bisogna inserire il seguente codice nel body della pagina html, mettendo gli indirizzi effettivi dei link alle pagine al posto del simbolo #. Si tratta di una lista con delle sottoliste: i gruppi di link con testo link1, link2, link3 ecc, costituiscono le tendine del menu. Guardando il codice si vede che è racchiuso da un tag div=menuvert e c'è una classe iepatch che serve a riparare un errore di internet explorer (uno dei tanti....)

Utilizzare il foglio di stile che e inserire nell'head della pagina html il collegamento al foglio di stile:

Passiamo ora a considerare il foglio di stile. che va ovviamente personalizzato: ogni riga del foglio di stile è commentata e ci sono le indicazioni su come variare i parametri per adattarli alle proprie esigenze.

La cosa secondo me utile è che con questo foglio si può ottenere un menu verticale di vari tipi: i pulsanti possono essere ricavati da immagini ma anche essere semplici stringhe di testo, inoltre anche il numero di tendine può variare: si può andare da non avere affatto tendine ed ottenere un semplice menu verticale oppure arrivare ad 1 livello di tendina (per ora), tutto dipende dalla lista del testo html. Questo aspetto è molto utile perchè nel tempo i menu di navigazione di un sito possono cambiare e ampliarsi, in questo modo basta aggiungere una sottolista, e questa viene riconosciuta in automatico come tendina.

Ecco il codice:

div#menuvert {
width: 167px; /* per avere un menu che si estende per la lunghezza del pulsante, inserire larghezza immagine pulsante*/
height:67px; /*altezza di ogni voce del menu, porre uguale all'altezza del pulsante*/
line-height:67px;/*porre uguale al valore precedente per dare la centratura verticale del testo nel pulsante rispetto al suo box contenitore*/
text-align:center; /*da l'allineamento orizzontale del testo nel menu principale: se ci sono pulsanti grafici è meglio posizionarlo al centro del pulsante con text-align:center , se invece non voglio pulsanti ma rettangoli, è meglio text-align:left */
margin: 0;
padding: 0;
/*a questo punto sarebbe bene poter inserire un bordo colorato che raccolga il menu per intero ma ie non gradisce la cosa, per ora si rinuncia*/
}
div#menuvert ul {
margin: 0;
padding: 0;
list-style-type: none;/*per eliminare il selettore in tutte le liste e le sottoliste*/
background: green; /*colore della striscia verticale del menu */ }
div#menuvert li { /*definisce il modo di apparire delle voci principali del menu*/
width:167px; /*larghezza di ogni voce del menu, modificabile, inserire larghezza immagine pulsante*/
height:67px; /*altezza di ogni voce del menu, porre uguale all'altezza del pulsante*/
margin: 0px; /* azzera i margini, non modificabile */
margin-top: 4px;
padding: 0;
background-image:url(pulsante.gif); /*immagine del pulsante , si può omettere se non si vuole il pulsante grafico*/
/* aggiunge un bordo attorno ad ogni singolo pulsante*/
border-bottom: 1px solid black;
border-right: 1px solid yellow;
border-top: 1px solid black;
border-left: 1px solid yellow;/*fine bordo pulsante*/
}
div#menuvert li:hover {/*effetto rollover sui pulsanti*/ background-image:url(pulsanteOver.gif); /*immagine del rollover pulsante,si può omettere se non si vuole il pulsante grafico */
background-color:blue;
}
div#menuvert a { /* definisce gli stili per i link testuali*/
display: block;
color:black; /*colore del testo delle voci principali del menu */
text-decoration: none; /*toglie la sottolineatura sotto il link*/
/*padding-left:5px; da inserire se si è messo text-align:left dentro il div#menuvert*/
margin: 0; /* azzera i margini, non modificabile */
}
div#menuvert a:hover { /* definisce gli stili per i link al passaggio del mouse (rollover sul testo)*/
color:white; /*colore del testo al passaggio, impostare a piacere*/ }
div#menuvert li ul {display: none} div#menuvert li:hover ul { /* regola che definisce il modo di presentarsi dei sottomenu al passaggio del mouse */
display: block; /* fa apparire il sottomenu al passaggio del mouse */
position: absolute;
z-index:1; /* fa apparire il sottomenu in primo piano rispetto ad altri livelli, non cambiare impostazione */
width:150px; /* larghezza del sottomenu, impostabile a piacere */
padding: 0;
text-align:left; /*se è già impostato text-align:left in div#menuvert , allora qui è inutile*/
margin-top: -67px; /*posizione in verticale del sottomenu rispetto alla barra del menu, modificare per far salire verso l'alto il sottomenu e allinearlo alla voce di menu corrispondente, porre più o meno uguale all'altezza del pulsante*/
margin-bottom:0px; /*posizione del sottomenu rispetto alla voce di menu corrispondente, non modificare*/
margin-left:167px; /*posizione del sottomenu rispetto alla voce di menu corrispondente, porre uguale alla larghezza del pulsante del menu*/
margin-right:0px; /*posizione del sottomenu rispetto alla voce di menu corrispondente, non modificare*/
background: yellow; /* colore dello sfondo del sottomenu */
border:1px solid green; /* imposta il bordo del sottomenu, impostabile a piacere */
}
div#menuvert li li { /* regole che definiscono i box che contengono le voci del sottomenu */
border: none;
width: 150px; /*larghezza del box contenitore della voce del sottomenu, impostabile uguale a width: dentro a div#menuvert li:hover ul o poco più piccolo*/
height:25px; /*altezza del box contenitore varia la distanza tra una voce e l'altra, impostabile a piacere*/
line-height:25px;/*porre uguale al valore precedente per dare la centratura verticale del testo rispetto al box contenitore*/
background-image: none ; /*toglie l'immagine del pulsante che altrimenti verrebbe ripetuta*/
margin: 0 0 0 0;
}
div#menuvert li li a {
width: 150px;
height:25px; /*altezza del box contenitore varia la distanza tra una voce e l'altra, porre obbligatoriamente sempre uguale tutte le volte che si ripresenta height: come in div#menuvert li li */
padding-bottom:0px;
padding-top:2px;
padding-left:5px;
padding-right:2px;
}
div#menuvert li li:hover a { /*effetto rollover sul link del sottomenu al passaggio del mouse*/
background-image: none;
background-color:#006666;
color: white;
}

C'è ancora da aggiugere un elemento importante: internet explorer non riconosce (per un suo difetto) i menu a tendina così come sono ma ha bisogno della patch IE7_0_9 (per conoscere questa patch clicca qui), in aggiunta, come accennato all'inizio, mostra anche un problema di riconoscimento delle distanze tra i pulsanti, motivo per cui ne ho sviluppato un'altra su un altro piccolo foglio di stile che è menuvertIE.css. Senza quest ultimo piccolo foglio correttivo si ottiene un bizzarro "effetto elastico" del menu solo sulla posizione dell'ultimo pulsante. Queste non vanno modificate ed entrambe le patch si scaricano e si trovano nello stesso file zip in cui si trova il foglio di stile e vanno copiate nella directory principale del sito o in qualche sottocartella. Per fare in modo che queste vengano scaricate dal browser del visitatore del sito che usa Internet Explorer, nell'head dellla pagina html va inserita la seguente stringa:

Puoi scaricare tutti file necessari (ovvero il modello base di pagina html, le patch, il foglio di stile, e anche due immaginette di pulsanti) cliccando qui (versione attuale del foglio di stile: versione 2.1, ultimo aggiornamento 15-03-2007)

Spero di essere stata chiara, in ogni caso questi fogli sono soggetti a costante revisione, quindi lì aggiornerò nel tempo.

Per ogni dubbio o problema con questi codici scrivi a