Creare menu orizzontali, stavolta con le Gif

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 è:

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!

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

Commenti all'articolo (5)

{giovanni}
IE bug, a:hover non torna NON hover Leggi tutto
23-1-2008 13:43

sono immagini a caso fatte in tutta fretta, anziche' usare 'ste qua che ho postato io, crea due gif alte 30px e larghe 100 di tuo gusto/con i colori che ti servono ed usa quelle :) Leggi tutto
26-12-2005 12:05

ma le immagini? Leggi tutto
26-12-2005 11:08

piace? :mrgreen: Leggi tutto
21-12-2005 17:24

:whistle:
21-12-2005 17:12

La liberta' di parola e' un diritto inviolabile, ma nei forum di Zeus News vige un regolamento che impone delle restrizioni e che l'utente e' tenuto a rispettare. I moderatori si riservano il diritto di cancellare o modificare i commenti inseriti dagli utenti, senza dover fornire giustificazione alcuna. Gli utenti non registrati al forum inoltre sono sottoposti a moderazione preventiva. La responsabilita' dei commenti ricade esclusivamente sui rispettivi autori. I principali consigli: rimani sempre in argomento; evita commenti offensivi, volgari, violenti o che inneggiano all'illegalita'; non inserire dati personali, link inutili o spam in generale.
E' VIETATA la riproduzione dei testi e delle immagini senza l'espressa autorizzazione scritta di Zeus News. Tutti i marchi e i marchi registrati citati sono di proprietà delle rispettive società. Informativa sulla privacy. I tuoi suggerimenti sono di vitale importanza per Zeus News. Contatta la redazione e contribuisci anche tu a migliorare il sito: pubblicheremo sui forum le lettere piu' interessanti.
Sondaggio
Quale di questi dispositivi degni di un film di fantascienza ma già esistenti vorresti avere?
Erascan: un cancellino per lavagne bianche in grado di effettuare una scansione con OCR di tutto ciò che cancella.
Tamaggo Ibi: una videocamera con lente circolare in grado di scattare foto a 360 gradi.
No More Woof: legge le onde cerebrali dei cani e traduce i pensieri in linguaggio umano.
Il drone per le consegne Amazon Prime Air: consegnerà i pacchi volando, rendendo obsoleti i corrieri.
WAT: la lampada alimentata ad acqua.
Transparent TV: grazie alla tecnologia TOLED (LED Organici Trasparenti) è dotato di uno schermo praticamente invisibile.
Electrolux Wirio, la cucina trasportabile composta da quattro diversi elementi, per cucinare e tenere in caldo i cibi.
Touch Hear, per toccare con un dito una parola stampata e ascoltare la pronuncia e il significato.
Immersed Senses, una maschera per sub che estrae ossigeno dall'acqua ed è dotata di schermo per mostrare informazioni utili.
La maniglia che si sterilizza da sola grazie a una lampada integrata a raggi ultravioletti.
Heart Rate Monitor Earphone, gli auricolari che rilevano il battito cardiaco e il consumo di ossigeno.
Voyce, il collare per cani che misura il battito cardiaco e il ritrmo respiratorio, conta le calorie e indica se l'animale non fa abbastanza esercizio.
Makerbot Z18, una stampante 3D che funge da replicatore per oggetti voluminosi.

Mostra i risultati (1650 voti)
Marzo 2020
La truffa della chiavetta Usb che arriva per posta
Windows 10, Pannello di Controllo verso la pensione
Windows 10, in un video un assaggio delle novità
Cellulari, app e privacy ai tempi della pandemia
Coronavirus Challenge, leccare una toilette per notorietà
Windows 10, patch di emergenza per evitare il nuovo WannaCry
L'open source contro il coronavirus
Windows 10, l'update KB4535996 mina le prestazioni
L'Unione Europea vuole un proprio sistema operativo
Addio, Dada.it
Febbraio 2020
Smartphone, la UE rivuole le batterie rimovibili
Il ransomware che prende di mira gli italiani
Il browser per navigare sempre in incognito
Equo compenso, raffica di aumenti per Pc, smartphone e schede Sd
Come provare Windows 10X in anteprima, gratis
Tutti gli Arretrati


web metrics