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

Innanzitutto creiamo una nuova pagina in formato HTML e chiamiamola tabellare.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 è Tabellare ed ha come colore di sfondo un grigio scuro.

#Tabellare {
background-color: #333333;
}

Ora realizziamo una regola che determina le caratteristiche del tag ul all'interno dell' id Tabellare. Quì toglieremo i puntini davanti agli elementi della lista e definiremo la spaziatura interna degli elementi che sarà di 20 pixel dall'alto, di 3 pixel dal basso, di 3 pixel da sinistra e nessun pixel da destra.

#Tabellare ul {
margin: 0px;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 3px;
list-style-type: none;
}

A questo punto mettiamo in linea le singole voci contenute nell'elenco che a sua volta è contenuto nell' id Tabellare. In pratica agiamo sul tag li che è incluso nel tag ul quando è contenuto nell' id Tabellare.

#Tabellare ul li {
display: inline;
}

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 Tabellare. Questo vuol dire che agiamo sul tag a presente all'interno del tag li di una lista ordinata tag ul contenuta nell' id Tabellare. Questa regola definisce che gli elementi specificati avranno il margine sinistro di 10 pixel, nessun tipo di decorazione nel testo, un bordo superiore, destro e sinistro dello spessore di 1 pixel e di colore grigio chiaro, una spaziatura interna superiore di 3 pixel, sinistra di 20 pixel, destra di 20 pixel ed inferiore di 3 pixel, ed infine come colore di sfondo un grigio medio.

#Tabellare ul li a {
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #CCCCCC;
border-right-color: #CCCCCC;
border-left-color: #CCCCCC;
text-decoration: none;
padding-top: 3px;
padding-right: 20px;
padding-bottom: 3px;
padding-left: 20px;
margin-left: 10px;
background-color: #666666;
}

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.

#Tabellare ul li a:link, #Tabellare 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.

#Tabellare ul li a:hover, #Tabellare 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 Tabellare ed il gioco è fatto.

COMMENTI