Prendendo come partenza un tutorial dove si crea un menu orizzontale con effetto onmouseover usando i colori, vediamo ora di crearne uno usando invece delle immagini come sfondo e di risolvere tutti i problemi creati dalla difficolta' di ottenere un accettabile crossbrowsing. Partiamo dal codice (completo) della pagina:

Come vedete non c'e' nulla di particolare rispetto al solito, tranne il tag span che contiene il testo del link del menu. Il cancelletto nel tag a serve semplicemente a sostituire la Url di destinazione del link. Il Css invece è:

body {
   background: #fff;
   color: #000;
   margin: 0px;
   padding: 0px;
   text-align: center;
   font-family: verdana, arial, helvetica, sans-serif;
   font-size: 70%;
   }

hr, h1 {
   display: none;
   }
   
#esterno {
   width: 750px;
   border: 1px solid #fff;
   margin: 10px auto auto auto;
   text-align: left;
   }

#header {
   height: 150px;
   border: 1px solid #999;
   margin-bottom: 20px;
   background: url(logo.gif) no-repeat center center;
   }

#menu {
   background: url(sfondo.gif) repeat-x;
   }
   
   #menu ul {
      list-style: none;
      height: 30px;
      margin: 0px 0px 0px 70px;
      padding: 0px;
      border-left: 2px solid #c0c0c0;
      }
      
      #menu li {
         height: 30px;
         float: left;
         border-right: 2px solid #c0c0c0;
         margin: 0px;
         padding: 0px;
         }
      
   #menu a {
      display: block;
      width: 100px;
      height: 30px;
      text-align: center;
      text-decoration: none;
      font-size: 80%;
      font-weight: bold;
      color: #fff;
      }
      
      #menu a:hover {
         background: url(sfondo_abbassato.gif) repeat-x;
         }
   
   #menu a span {
      display: block;
      height: auto;
      width: 98%;
      margin-top: 9px;
      float: left;
      text-align: center;
      }

   #menu a:hover span {
      margin-top: 10px;
      }

#corpo {
   border: 1px solid #999;
   margin: 20px 0px 20px 0px;
   padding: 20px;
   }

#footer {
   border: 1px solid #999;
   padding: 10px 20px 10px 20px;
   text-align: right;
   }

Tralasciando header, corpo e footer che non hanno nulla di particolare, concentriamoci sul div menu; intanto ecco le immagini usate per la posizione "normale" e per la posizione "tasto premuto" (rigorosamente a casaccio: se usate queste, rinominatele, oppure createne di vostro gusto).

Il codice:

#menu {
   background: url(sfondo.gif) repeat-x;
   }

Al div #menu diamo l'immagine di sfondo e la facciamo ripetere per tutta la larghezza; c'e' chi preferisce fare un'immagine sottilissima, anche di un solo pixel per risparmiare peso, ma a volte ci sono piccoli ritardi nel caricamento su tutta la larghezza, percio' personalmente la nostra preferenza va a una larghezza dai 60 ai 100 pixel.

   #menu ul {
      list-style: none;
      height: 30px;
      margin: 0px 0px 0px 70px;
      padding: 0px;
      border-left: 2px solid #c0c0c0;
      }

- Come al solito togliamo il pallino dalla lista (list-style: none;)
- Diamo l'altezza: in questo modo sara' ul che determinera' l'altezza del div.
- Siccome useremo il comando float, dobbiamo determinare in questo modo quanto spazio lasciare da un lato e dall'altro, percio' daremo 70px a sinistra (ricordiamo che i 4 comandi si leggono "alto-destra-basso-sinistra").
- Togliamo padding; assieme a margin 0 serve per sopperire a qualche baco dei browser.
- Il cliente desidera un bordo tra i tasti: questa prima parte ci serve per il bordo laterale sinistro del primo tasto.

      #menu li {
         height: 30px;
         float: left;
         border-right: 2px solid #c0c0c0;
         margin: 0px;
         padding: 0px;
         }

- Di nuovo diamo l'altezza.
- Facciamo flottare l'elemento a sinistra; siccome prima abbiamo dato un margin-left di 70 pixel a ul, il primo li partira' da quel punto, mentre gli altri si appoggeranno in sequenza.
- border right: uno per ogni li completa la sequenza di bordi tra i tasti.
- margin e padding sono a 0 sempre per il crossbrowsing: a differenza di quanto si potrebbe pensare, il comando list-style: none non e' letto dai browser come "togli il punto elenco" (!)

   #menu a {
      display: block;
      width: 100px;
      height: 30px;
      text-align: center;
      text-decoration: none;
      font-size: 80%;
      font-weight: bold;
      color: #fff;
      }

Sebbene sia applicabile anche ad altri elementi, Internet Explorer legge l'effetto hover solo per il tag a, percio' e' a esso che siamo costretti a darlo.

- display block per rendere a (elemento in linea, quindi a dimensione variabile dal contenuto) un elemento block, quindi a dimensione determinabile da noi.
- Larghezza e altezza
- Allineamento centrale
- Togliamo la sottolineatura dal link.
- Rimpiccioliamo la font; il cliente aveva segnalato un sito con una particolare font molto piccola che usava pero' le Gif per ogni tasto; siccome si trattava comunque di una font a bastoncino, anziche' complicarci la vita personalizzando ogni tasto, abbiamo preferito riadattare la font verdana per ottenere un effetto molto simile a quello desiderato.
- Rendiamo piu' evidente la font.
- Diamo colore bianco.

Anche la scelta di usare il maiuscolo per il testo dei pulsanti deriva da questa preferenza estetica del cliente; se la scelta e' accettabile in testi brevi quali i nomi dei pulsanti, in genere e' preferibile NON usare il maiuscolo per i testi lunghi, perche' compromette la facilita' di lettura.

      #menu a:hover {
         background: url(sfondo_abbassato.gif) repeat-x;
         }

Tutti i parametri impostati per a sono validi anche per hover. L'unica cosa che cambia e' l'immagine di sfondo, o meglio: sovrascriviamo l'immagine che stiamo usando per lo sfondo del div con un'immagine di sfondo che dia l'effetto del tasto premuto.

   #menu a span {
      display: block;
      height: auto;
      width: 98%;
      margin-top: 9px;
      float: left;
      text-align: center;
      }

Qui il problema era fare in modo che il testo restasse comunque centrato in verticale/orizzontale e leggibile anche con l'effetto hover del tasto senza sfasciare il layout, percio':
- Abbiamo dato anche allo span display block per renderlo "solido".
- Abbiamo dato altezza automatica: in questo modo l'altezza sara' la minima necessaria a contenere il testo.
- Abbiamo dato una larghezza del 98% per evitare che "toccando" i bordi li allargasse, ma che comunque prendesse quasi tutta la larghezza dell'elemento contenitore.
- Abbiamo dato un margin-top di 9 pixel per centrarlo verticalmente: questo ci e' concesso dall'aver dato precedentemente display block all'elemento.
- L'abbiamo fatto flottare a sinistra: siccome e' largo quasi quanto il contenitore, in realta' "flotta" poco, pero' "galleggia" nello spazio contenitore e gestiamo meglio gli altri parametri.
- Centriamo il testo contenuto nell'elemento.

   #menu a:hover span {
      margin-top: 10px;
      }

Per completare l'effetto "bottone premuto", facciamo in modo che quando stiamo sul pulsante il testo si abbassi di un pixel. Et voila'!

Alcuni comandi sono incomprensibili, ma purtroppo necessari per avere un minimo di sicurezza sulla stabilita' crossbrowsing del nostro layout. Per quanto riguarda l'accessibilita', il layout mantiene la struttura semantica corretta data dall'uso della lista per l'elenco dei link e permette anche un modesto ingrandimento senza sfasciarsi.

Nel caso qualcuno desiderasse personalizzare pulsante per pulsante, e' sufficiente dare un id a ogni tag li e determinare le caratteristiche di ogni #qualcosa a e di ogni #qualcosa a:hover, e di dare a #menu a span {display: none;}: altrettanto efficace e utilizzabile, per esempio nel caso vogliate usare una font particolare per i tasti.

Se facendo qualche prova ottenete risultati diversi (in meglio o in peggio, o anche semplicemente lo stesso risultato ma con meno comandi), scrivetelo tra i commenti!

Hai a disposizione ancora caratteri. Per inserire commenti più lunghi (e senza CAPTCHA), iscriviti.
Il tuo nome:		La tua email: