Menu di navigazione verticale con i fogli di stile CSS

Seguendo queste indicazioni dovrebbe essere abbastanza semplice costruire il proprio menu verticale.

Cliccando qui sull'esempio si possono osservare due varianti di base: con i pulsanti oppure con semplici rettangoli.

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 è un vero e proprio testo, non fa parte dell'immagine ed è quello che inseriremo dopo nella pagina html.

Preparate le immaginette metterle nella cartella del proprio sito o in una sottocartella. Volendo si può scegliere di non usare immagini ma semplici rettangoli, in questo caso ovviamente non c'è bisogno di questo passaggio.

Cliccare qui per scaricare il file zip contenente il foglio di stile MenuVerticale.css che useremo in questo caso. Inserirlo nella directory del proprio sito o in una sua sottocartella.

Nell'head della pagina html in cui si vuole scrivere il menu inserire:

in questo modo si collega il foglio di stile alla nostra pagina.

Attenzione: se il foglio lo abbiamo messo in una sottocartella, un errorino che si commette spesso è di omettere il percorso necessario per raggiungere il suddetto file. In quel caso il codice deve essere del tipo:

Fatto questo, bisogna inserire il seguente codice nel body della pagina html,si tratta di una semplicissima lista inserita all'interno del tag DIV a cui è stata applicata la classe menuversotto che viene definita nel foglio scaricato. Questa lista va messa esattamente dove si vuole che compaia il menu, per ora non preoccupiamoci se l'effetto sulla pagina risulta strano.

Va ora personalizzato il codice appena inserito mettendo al posto delle voci Menu1, Menu2, Menu3... i testi dei pulsanti del menu e inserendo gli indirizzi reali dei link alle pagine al posto del simbolo # nel tag <a href="#">.

Ora cominciamo a lavorare sulla parte complicata: bisogna personalizzare il foglio di stile facendo in modo che il menu assuma le caratteristiche che vogliamo noi.

Bisogna quindi aprire il foglio di stile che prima abbiamo messo nella directory e modificare le varie voci seguendo le indicazioni presenti nel foglio stesso, modificare via via i parametri e vedere di volta in volta l'effetto che fa con il browser.

Consiglio di seguire queste linee guida in generale:

1-Per fare le prove di funzionamento del menu usare Firefox come browser (vedi avvertenze clicca qui) NON INTERNET EXPLORER ;

2-Inserire prima le dimensioni del pulsante (o comunque le dimensioni del rettangolino se il pulsante non serve), poi inserire il percorso corretto per far riconoscere al foglio di stile le immagini dei due stati del pulsante, da ultimo rivedere riga per riga tutto il foglio sistemando il resto dei parametri (colori, distanze, ecc)

3-Dopo aver finito il lavoro usando Firefox, aprire la stessa pagina usando Internet explorer e osservare come si comporta il menu, probabilmente ci saranno delle differenze ben visibili.

A questo punto c'è da aggiugere un elemento importante: Internet Explorer non riconosce (per un suo difetto) bene i css come dovrebbe dunque si corre ai ripari con un apposito foglio di stile (hai letto la paginetta sui menu css in generale?) che varia dimensioni e distanze, pertanto ora bisogna scaricare cliccando qui anche un altro foglio di stile che va messo insieme a quello precedente e in cui basta modificare un solo parametro (è spiegato nel foglio)

Per fare in modo che questa patch venga scaricata dal browser del visitatore del sito che usa Internet Explorer, ma non quando usa Firefox ed altri browser, nell'head dellla pagina html sotto al link che già mi collega l'altro foglio di stile, va inserita la seguente porzione di codice in javascript:

Il menu a questo punto è pronto.

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

Antonella

Ultima revisione pagina: 26 marzo 2009