Menu verticale con immagini di background in rollover
In un vecchio articolo abbiamo visto come realizzare con i CSS un menu verticale con effetto mouseover, utilizzando un differente colore di sfondo per contrassegnare la voce su cui si sta passando col mouse.
Rivisitiamo ed ampliamo detto esempio, aggiungendo due caratteristiche fondamentali a questo menu: maggiore accessibilità grazie all'impiego degli elenchi puntati ed una migliore resa in termini di design.
Ecco il risultato che intendiamo ottenere:
Queste le due immagini utilizzate per l'esempio a cui assegnare il nome menu_1.gif e menu_2.gif:
 |
 |
le quali dimensioni (150X22 pixel) sono state studiate ad hoc in funzione della larghezza del box, delle dimensioni del font e del padding assegnato alle singole voci.
Invito i lettori a creare immagini personalizzate a livello grafico ed in funzione delle dimensioni utili alle proprie esigenze.
Passiamo alla pratica, iniziando a disegnare il menu. Analizziamo il codice HTML:
<div id="menu">
<ul>
<li><a href="#">Pagina 1</a></li>
<li><a href="#">Pagina 2</a></li>
<li><a href="#">Pagina 3</a></li>
<li><a href="#">Pagina 4</a></li>
<li><a href="#">Pagina 5</a></li>
</ul>
</div>
Tutto il menu si troverà in un box IDentificato come "menu", all'interno del quale costruiremo un elenco puntato contenente i link.
Non assegneremo nessun ID e nessuna classe ai link a nessuno degli elementi del menu (elenco, lista, link), basandoci esclusivamente sulle identificazioni mediante la nidificazione degli elementi.
Segue il codice CSS corredato da opportuni commenti:
/* Stilizziamo genericamente il tag DIV */
div
{
font-size: 10px;
font-family: verdana;
}
/* Assegnamo lo sfondo e la larghezza al box del menu */
#menu
{
background: #CCDDEE;
width: 150px;
}
/* Eliminiamo lo stile di default dal tag UL contenuto nel menu */
#menu ul
{
margin: 0px 0px 0px 0px;
list-style-type: none;
}
/* Stilizziamo le liste contenute nel menu */
#menu li
{
margin: 0px 0px 0px 0px;
border-bottom: solid 1px #FFFFFF;
}
/* Assegnamo lo stile ai link contenuti nell'elenco del menu */
#menu li a, li a:hover
{
display: block;
position: relative;
text-decoration: none;
color: #192939;
font-weight: bold;
padding: 5px 5px 5px 5px;
}
/* Impostiamo lo sfondo dei link, per default ed al mouseover */
#menu li a
{
background-image: url(menu_1.gif);
}
#menu li a:hover
{
background-image: url(menu_2.gif);
}
Le operazioni di nidificazioni degli elementi, come accennato in precedenza, garantiscono che l'unico elenco puntato che verrà visualizzato con questa stilizzazione è quello del menu, per effetto della nidificazione all'interno del box con ID "menu".
Tutti gli altri elenchi puntati del sito avranno il loro stile di default, o quello esplicitamente assegnato via CSS.
