Trasformare liste ordinate in menu di navigazione
Le potenzialità dei CSS2 ci permettono di trasformare, con poche e semplici operazioni, le liste ordinate in
eleganti menu di navigazione.
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>
Trasformiamola dunque in un menu orizzontale attraverso il CSS.
Per prima cosa definiamo i margini interni (
padding) ed esterni (margin) della nostra lista
a zero, assegnamo un colore 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;
}
Diciamo agli elementi di lista di disporsi in orizzontale attraverso la
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
proprietà
punti elenco.
#menu li{
display: inline;
margin: 0;
padding: 0;
list-style-type: none;
}
Menu Orizzontali e Verticali con i CSS – Versione 23/02/2015
Pag. 1
A questo punto diamo uno unico stile ai link e ai link visitati: assegnamo il grassetto, il margine
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à textdecoration:none e li definiamo di colore nero.
destro pari ad
#menu a:link#evidenziato,
#menu a:visited#evidenziato, #menu a:hover{
border-top: 2px solid #c00;
color: #c00;
}
Riepilogo Menu di navigazione orizzontale:
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>
Codice CSS
#menu
{
margin: 0;
padding:0;
background:#eee;
border-bottom: 1px solid #c00;
border-top: 1px solid #c00;
font: 90% Arial, Helvetica, sans-serif, Verdana;
}
#menu li
{
display: inline;
margin: 0;
padding: 0;
list-style-type: none;
}
#menu a:link, #menu a:visited
{
font-weight: bold;
margin:0 1em;
text-decoration: none;
color: #000;
}
#menu a:link#evidenziato, #menu a:visited#evidenziato, #menu a:hover
{
border-top: 2px solid #c00;
color: #c00;
}
Menu Orizzontali e Verticali con i CSS – Versione 23/02/2015
Pag. 2
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.
Definiamo l'ampiezza del nostro menu attraverso la proprietà
width:150px e i margini
padding)ed esterni (margin) pari a zero, stabiliamo il tipo di carattere che
interni (
vogliamo usare e la dimensione del carattere.
#menu{
width: 150px;
padding: 0;
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
}
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;
}
Azzeriamo anche i margini degli elementi di lista
#menu ul li {
margin: 0;
padding: 0;
}
Menu Orizzontali e Verticali con i CSS – Versione 23/02/2015
Pag. 3
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
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
l'effetto
(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;
}
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;
}
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;
}
Riepilogo Menu di navigazione verticale:
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>
Menu Orizzontali e Verticali con i CSS – Versione 23/02/2015
Pag. 4
Codice CSS
#menu
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
width: 150px;
padding: 0;
margin: 0;
}
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li
{
margin: 0;
padding: 0;
}
#menu ul li a
{
display: block;
width:150px;
border-bottom: 1px dashed #999;
text-decoration: none;
padding: 5px 0 2px 4px;
color: #666;
}
#menu a:hover
{
color: #000;
background-color: #eee;
}
#menu a:link#evidenziato, #menu a:visited#evidenziato
{
font-weight:bold;
}
Esempi di Liste Orizzontali e Verticali
Menu Orizzontali e Verticali con i CSS – Versione 23/02/2015
Pag. 5