In questa specifica lezione realizzeremo un menù verticale personalizzato con i CSS.

Innanzitutto creiamo una nuova pagina in formato HTML e chiamiamola verticale.html

All'interno dei tag body inseriamo una lista di link ordinata.


A questo punto realizziamo all'interno della pagina e non come documento esterno una una serie di regole css che determinano la rappresentazione grafica di questi link.

La prima regola sarà un tag div che rappresenta un contenitore per tutti i link. Il nome di questo id è Verticale ed ha come colore di sfondo un grigio medio, una spaziatura interna di 15 pixel ed una larghezza di 172 pixel.

#Verticale {
background-color: #666666;
padding: 15px;
width: 172px;
}

Ora realizziamo una regola che determina le caratteristiche del tag ul all'interno dell' id Verticale. Quì toglieremo i puntini davanti agli elementi della lista e definiremo la spaziatura fra gli elementi.

#Verticale ul {
list-style-type: none;
padding: 0px;
}

Continuando su questa tipologia di modifica realizziamo una regola che ci consenta di personalizzare gli elementi che corrispondono ad un collegamento e che sono presenti come voci di un elenco contenute nell' id Verticale. Questo vuol dire che agiamo sul tag a presente all'interno del tag li di una lista ordinata tag ul contenuta nell' id Verticale. Questa regola definisce che gli elementi specificati avranno il margine superiore ed inferiore di 10 pixel, nessun tipo di decorazione nel testo, uno spazio di 8 pixel dall'elemento vicino.

#Verticale ul li a {
text-decoration: none;
display: block;
padding: 8px;
margin-top: 10px;
margin-bottom: 10px;
}

Ora sempre per il tag a definiamo il comportamento sia quando è un link sia quando è un link visitato. Quando si verificano queste due circostanze il colore deve essere rosso.

#Verticale ul li a:link, #Verticale ul li a:visited {
color: #FF0000;
}

Mentre sia quando passeremo con il cursore del mouse sopra il precedente tag a , sia quando il collegamento rappresenta la pagina corrente, il colore di sfondo diventerà giallo.

#Verticale ul li a:hover, #Verticale ul li.current a:link {
background-color: #FFFF00;
}

Definite tutte le regole racchiudiamo il codice definito all'inizio della lavorazione all'interno del tag div che richiama la regola Verticale ed il gioco è fatto.

COMMENTI