LAU

Introduzione

La separazione tra contenuto e presentazione offre, tra gli innumerevoli vantaggi, quello di usare un codice XHTML scarno, veloce ed essenziale e di delegare al foglio di stile tutti gli aspetti di presentazione.

Nel caso delle liste ordinate è possibile ottenere gradevoli menu di navigazione, sia orizzontali che verticali, applicando poche e semplici regole al foglio di stile.

Usare l'elemento lista ordinata per i menu di navigazione è l'approccio semanticamente più corretto: che cos'è un menu di navigazione se non una lista di link? Inoltre l'uso della lista ordinata, nel caso di CSS disabilitati o di browser che non li supportino, ci consente di visualizzare il nostro menu di navigazione come una semplice ed efficace lista dove ogni termine è preceduto da un punto elenco.

Questo articolo contiene due tutorial per realizzare un menu orizzontale e un menu verticale, inoltre alla fine dell'articolo troverete un elenco di risorse sul web che trattano questo argomento.

torna su

Menu orizzontale

Il codice XHTML:

<div id="menu">
<ul>
<li><a href="#" id="evidenziato">Homepage</a></li>
<li><a href="#">Chi siamo</a></li>
<li><a href="#">Attivit&agrave;</a></li>
<li><a href="#">Risorse</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</div>

Visualizza come appare la lista priva di CSS

Trasformiamola dunque in un menu orizzontale attraverso il CSS.

Passo 1

Per prima cosa definiamo i margini interni (padding) ed esterni (margin) della nostra lista a zero, assegnamo un coloro di sfondo, e racchiudiamo il nostro menu tra due righe orizzontali rosse, infine stabiliamo il tipo di carattere che vogliamo usare.

#menu{
margin: 0;
padding:0;
background:#eee;
border-bottom: 1px solid #c00;
border-top: 1px solid #c00;
font-family: Arial, Helvetica, sans-serif, Verdana;
}

Ecco come appare la lista dopo aver applicato lo stile

Passo 2

Diciamo agli elementi di lista di disporsi in orizzontale attraverso la proprietà display:inline e portiamo a zero i margini interni ed esterni, inoltre mediante la proprietà list-style-type:none facciamo in modo che non vengano visualizzati i punti elenco.

#menu li{
display: inline;
margin: 0;
padding: 0;
list-style-type: none;
}

Il menù si dispone orizzontalmente e spariscono i punti elenco

Passo 3

A questo punto diamo uno unico stile ai link e ai link visitati: assegnamo il grassetto, il margine destro pari ad 1 em per distanziare orizzontalmente gli elementi di lista tra di loro, facciamo in modo che i nostri link non vengano sottolineati attraverso la proprietà text-decoration:none e li definiamo di colore nero.

#menu a:link#evidenziato, 
#menu a:visited#evidenziato, #menu a:hover{
border-top: 2px solid #c00;
color: #c00;
}

Ecco il risultato finale della trasformazione della nostra lista ordinata in menù orizzontale, provate a passare con il mouse sopra i link per vedere l'effetto hover assegnato.

torna su

Menu Verticale

Il codice XHTML è il medesimo del menu orizzontale

<div id="menu">
<ul>
<li><a href="#" id="evidenziato">Homepage</a></li>
<li><a href="#">Chi siamo</a></li>
<li><a href="#">Attivit&agrave;</a></li>
<li><a href="#">Risorse</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</div>

la differenza sta nel foglio di stile, trasformiamo dunque la medesima lista ordinata in un menu verticale attraverso il CSS.

Passo 1

Definiamo l'ampiezza del nostro menu attraverso la proprietà width:150px e i margini interni (padding)ed esterni (margin) pari a zero, stabiliamo il tipo di carattere che vogliamo usare e la dimensione del carattere.

#menu{
width: 150px;
padding: 0;
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
}

In questa fase l'unico cambiamento della lista riguarda il carattere e le dimensioni.

Passo 2

Attraverso la proprietà list-style-type:none facciamo in modo che non vengano visualizzati i punti elenco, portiamo a zero i margini interni ed esterni della nostra lista.

#menu ul{
list-style: none;
margin: 0;
padding: 0;
}

Il risultato sarà appunto la mancanza dei punti elenco

Passo 3

Azzeriamo anche i margini degli elementi di lista

#menu ul li {
margin: 0;
padding: 0;
}

Passo 4

Definiamo il comportamento dell'elemento "a" - a:display:block fa sì che gli eventi associati al passaggio del mouse (ad esempio il cambiamento di forma del puntatore del mouse o l'effetto hover definito nel passo successivo) si verifichino per tutta l'ampiezza definita per l'elemento "a" (150px), facciamo in modo che i nostri link non vengano sottolineati attraverso la proprietà text-decoration:none e li definiamo di colore grigio scuro, inoltre assegnamo un valore al margine interno (padding) superiore (5px), inferiore (2px) e sinistro (4px), il destro lo fissiamo a zero

#menu ul li a {
display: block; 
width:150px;
border-bottom: 1px dashed #999;
text-decoration: none; 
padding: 5px 0 2px 4px;
color: #666;
}

Dopo questi due passaggi la nostra lista ha già l'aspetto di un menù di navigazione verticale

Passo 5

Stabiliamo che al passaggio del mouse i nostri link del menu di navigazione debbano diventare di colore nero e e che lo sfondo assuma un colore grigio chiaro.

#menu a:hover{
color: #000;
background-color: #eee;
}

Passo 6

Nel nostro ultimo passo facciamo in modo che il link evidenziato appaia in grassetto sia quando evidenziato che quando visitato

#menu a:link#evidenziato, 
#menu a:visited#evidenziato{
font-weight:bold;
}

Ecco il risultato finale della trasformazione della nostra lista ordinata in menù verticale.

torna su

Risorse in rete sulla trasformazione delle liste ordinate in menu di navigazione

Esistono molti siti in rete con svariati esempi ai quali ispirarsi per trasformare le liste ordinate in menu di navigazione, la maggior parte sono in lingua inglese:

• Listamatic
  si possono trovare una lista (è il caso di dirlo!) di menu verticali e di menu orizzontali, esempi riguardanti liste annidate e un tutorial che spiega passo per passo come effettuare le vostre trasformazioni attraverso il CSS.
• Esempio di menu a schedario
  in questa pagina un esempio di menu a schedario (le cosiddette tab) con sottomenu
• CSS tabbed navigation
  un altro esempio di menu a schedario
• Menu orizzontale con accesskey
  questo menu riporta in maniera visibile il tasto di accesso rapido collegato ad ogni singola voce di menu
• Free menu design
  esempi di menu scaricabili gratuitamente stilisticamente molto gradevoli
• CSS Playground
  il sito è pieno di esempi e di sperimentazioni con i CSS, una sezione è interamente dedicata ai menu di navigazione
• A list a part: Sliding Door
  in quest'articolo viene spiegata una tecnica detta appunto sliding door per realizzare menu a schedario molto gradevoli graficamente
• Inverted Sliding Doors tabs
  la versione del menu Sliding Door visualizzata all’inverso
• Alsacréation
  Galleria di menu creati in XHTML e con i fogli di stile
• BulletProof Slants
  Un ottimo menu orizzontale che supporta molto bene l'ingrandimento del carattere
• CSSVault
  una pagina piena di link utili per sviluppare sistemi di navigazione basati sui CSS
• List-o-Matic
  un tool on line per generare automaticamente menu di navigazione formattati con i css.

torna su

Articoli correlati

torna su