Ci sono molti modi per creare un menù per un sito, ottimi o da evitare, pesanti o leggeri. L’uso della lista è sicuramente un metodo veloce e leggero capace di dare dei risultati soddisfacenti in poco tempo, sia estetici che strutturali.
Inoltre il menù a lista è facilmente supportato da browser vecchi.

• Home
• Portfolio
• Servizi
• Sistemi
• Blog
• Contatti

Il codice HTML
La struttura è molto semplice, è una lista non ordinata con all’interno i link del menù dentro ogni elemento.

<ul id="nav">
   <li id="nav-home"><a href="#">Home</a></li>
   <li id="nav-portfolio"><a href="#">Portfolio</a></li>
   <li id="nav-servizi"><a href="#">Servizi</a></li>
   <li id="nav-sistemi"><a href="#">Sistemi</a></li>
   <li id="nav-blog"><a href="#">Blog</a></li>
   <li id="nav-contatti"><a href="#">Contatti</a></li>
</ul>

Perchè una lista? Semplicemente perchè un menù non è altro che una lista di link. Il modo migliore di creare una lista di link è quello di usare un elemento lista. Inoltre usando una lista si ha sempre una struttura anche se il CSS è disabilitato.

A questo punto, con nessuno stile CSS applicato, la lista appare come una classica lista basata sullo stile di default del browser.

Sono stati messi degli ID agli elementi UL e LI.

Il codice CSS
Ora descriveremo passo lo sviluppo dello stile CSS.

Prima di tutto azzeriamo il MARGIN e il PADDING della lista e la mettiamo in orizzontale:

#nav {
   margin:0;
   padding:0;
}
#nav li {
   display:inline;
   padding:0;
   margin:0;
}

Questo stile mette i link sulla stessa linea, come se non ci fosse una lista. Inoltre rimuove i punti neri della lista, dato che sono visualizzati solo con l’attributo display:list-item. Alcuni browser poco usati possono visualizzare i punti neri anche usando display:inline. Se volete assicurarvi che nessun browser disegni i punti neri, aggiungete list-style-type:none alla regola #nav.

Ora iniziamo a stilizzare le caselle del menù. Lo stile lo daremo ai link e non agli elementi della lista perchè vogliamo che l’intera area sia cliccabile non solo il testo. Diamo un po’ di colore per renderci conto delle modifiche:

#nav a:link,
#nav a:visited {
   color:#000;
   background-color:#b2b580;
}

Notare che lo stile è lo stesso per il link normali e i link visitati. Aggiungiamo anche un po’ di padding:

#nav a:link,
#nav a:visited {
   color:#000;
   background-color:#b2b580;
   padding:20px 40px 4px 10px;
}

E’ un po’ meglio. Ma c’è un problema potenziale che non è visibile al momento. E’ più facile vederlo aggiungendo uno sfondo all’elemento UL. Aggiugiungiamo quindi un colore di sfondo:

#nav {
   margin:0;
   padding:0;
   background-color:#808259;
}

Ora però i link escono dall’elemento lista. Per risolvere il problema conviene trasformare i link in blocchi ‘floattandoli’ a sinistra con float:left. Inoltre settiamo la larghezza ad auto per riempire tutto lo spazio disponibile:

#nav a:link,
#nav a:visited {
   color:#000;
   background-color:#b2b580;
   padding:20px 40px 4px 10px;
   float:left;
   width:auto;
}

Avremmo potuto mettere display:block alla regola CSS dei link per trasformarli in blocchi, ma considerando che gli elementi ‘floattati’ sono automaticamente dei blocchi, non è necessario metterlo.

Avrete notato che lo sfondo è sparito quando abbiamo ‘floattato’ i link. Questo perchè gli elementi ‘floattati’ sono usciti dal flusso del documento, rendendo virtualmente vuoto l’elemento UL. Lo sfondo esiste ancora, ma è praticamente invisibile. Per far riapparire lo sfondo bisogna ‘flottare’ anche l’elemento UL. Inoltre gli mettiamo una larghezza del 100% per prendere tutto lo spazio disponibile:

#nav {
   margin:0;
   padding:0;
   background-color:#808259;
   float:left;
   width:100%;
}

Ora però i link sono tutti attaccati, è difficile capire dove finisce uno e dove inizia il successivo. Metteremo quindi un bordo a destra ai link. Inoltre aggiungeremo un bordo a sinistra utilizzando una pseudo classe :first-child per applicare questa regola solamente al primo link. Per completare il tutto diamo un bordo superiore ed inferiore all’elemento UL:

#nav {
   margin:0;
   padding:0;
   background-color:#808259;
   float:left;
   width:100%;
   border:1px solid #42432d;
   border-width:1px 0;
}
#nav a:link,
#nav a:visited {
   color:#000;
   background-color:#b2b580;
   padding:20px 40px 4px 10px;
   float:left;
   width:auto;
   border-right:1px solid #42432d;
}
#nav li:first-child a {
   border-left:1px solid #42432d;
}

La pseudo classe :first-child non è riconosciuta da Internet Explorer per Windows, quindi il primo link non avrà il bordo a sinistra. Non è una grave mancanza, però se proprio ne avete bisogno create una classe apposita per il primo link con il bordo a sinistra:

#nav-home {
   border-left:1px solid #42432d;
}

Ora cambiamo l’aspetto del testo rimuovendo la sottolineatura, rendendolo in grassetto, specificandone le dimensioni, selezionandone il font, metterlo in maiuscolo e decidendo l’altezza della linea che lo contiene:

#nav a:link,
#nav a:visited {
   color:#000;
   background:#b2b580;
   padding:20px 40px 4px 10px;
   float:left;
   width:auto;
   border-right:1px solid #42432d;
   text-decoration:none;
   font:bold 1em/1em Arial, Helvetica, sans-serif;
   text-transform:uppercase;
}

Per dare un aspetto gradevole alle voci del menù quando il mouse ci passa sopra creeremo una classe con lo stato :hover con colori di testo e sfondo differenti:

#nav a:hover {
   color:#fff;
   background:#727454;
}

E’ ora di rendere il link attivo riconoscibile così il visitatore saprà sempre dove si trova.

Bisogna dare un ID al tag BODY di ogni pagina linkata dal menù. Questo serve per lo stile CSS per capire dove si trova al momento l’utente, e quindi in base all’ID s’illuminerà la voce del menù relativa.
Inoltre conviene anche levare l’effetto :hover sulla voce illuminata. E per dare un effetto gradevole alla pressione della voce di menù, abbiamo aggiunto anche lo stato :active che avrà lo stesso aspetto di un link illuminato:

#home #nav-home a:link,
#portfolio #nav-portfolio a:link,
#servizi #nav-servizi a:link,
#sistemi #nav-sistemi a:link,
#blog #nav-blog a:link,
#contatti #nav-contatti a:link,
#home #nav-home a:visited,
#portfolio #nav-portfolio a:visited,
#servizi #nav-servizi a:visited,
#sistemi #nav-sistemi a:visited,
#blog #nav-blog a:visited,
#contatti #nav-contatti a:visited {
   background-color:#e35a00;
   color:#fff;
}
#home #nav-home a:hover,
#portfolio #nav-portfolio a:hover,
#servizi #nav-servizi a:hover,
#sistemi #nav-sistemi a:hover,
#blog #nav-blog a:hover,
#contatti #nav-contatti a:hover {
   background-color:#e35a00;
}
#nav a:active {
   background-color:#e35a00;
   color:#fff;
}

Finito!
Come vedete il procedimento è molto semplice, con poco tempo si crea un menù bello da vedere e funzionale.

Fonte: 456 Berea Street

Tags: CSS

Questo post è stato pubblicato Giovedì, Febbraio 14th, 2008 e si trova nella categoria CSS.
Non vuoi perdere le ultime novità di questo blog?
Registrati al nostro feed RSS 2.0!
Lascia il tuo commento