Tutorial di Html (dal forum "Linguaggi per il Web" dell'Olimpo Informatico).
[ZEUS News - www.zeusnews.it - 26-12-2005]
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 è:
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).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; }
Il codice:
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 { background: url(sfondo.gif) repeat-x; }
- Come al solito togliamo il pallino dalla lista (list-style: none;)#menu ul { list-style: none; height: 30px; margin: 0px 0px 0px 70px; padding: 0px; border-left: 2px solid #c0c0c0; }
- Di nuovo diamo l'altezza.#menu li { height: 30px; float: left; border-right: 2px solid #c0c0c0; margin: 0px; padding: 0px; }
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.#menu a { display: block; width: 100px; height: 30px; text-align: center; text-decoration: none; font-size: 80%; font-weight: bold; color: #fff; }
- 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.
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:hover { background: url(sfondo_abbassato.gif) repeat-x; }
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':#menu a span { display: block; height: auto; width: 98%; margin-top: 9px; float: left; text-align: center; }
Per completare l'effetto "bottone premuto", facciamo in modo che quando stiamo sul pulsante il testo si abbassi di un pixel. Et voila'!#menu a:hover span { margin-top: 10px; }
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!
Se questo articolo ti è piaciuto e vuoi rimanere sempre informato con Zeus News
ti consigliamo di iscriverti alla Newsletter gratuita.
Inoltre puoi consigliare l'articolo utilizzando uno dei pulsanti qui
sotto, inserire un commento
(anche anonimo)
o segnalare un refuso.
© RIPRODUZIONE RISERVATA |
|
|
||
|