In questo corso realizzeremo un sito web dinamico capace di interagire con l'utente e di consegenza modificare il contenuto delle pagine.

Come primo passo realizzeremo diverse tipologie di menù per i collegamenti personalizzate tramite i css. Faccio presente come il discorso sui css sia stato affrontato all'interno delle guide del sito in numerose occasioni e addirittura vi sia la presenza di un intero corso dedicato all'argomento.

Come programma per la realizzazione del sito userò Dreamweaver ma le stesse identiche operazioni si possono eseguire con qualsiasi programma dedicato a questa tipologia di utilizzo addirittura potremmo usare il semplice blocco note fornito assieme al sistema operativo.

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

Innanzitutto creiamo una nuova pagina in formato HTML e chiamiamola orizzontale.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 è Orizzontale ed ha come colore di sfondo un grigio medio ed un'altezza di 78 pixel.

#Orizzontale { background-color: #999999; height: 78px;}

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

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

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

#Orizzontale 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 orizzontale. Questo vuol dire che agiamo sul tag a presente all'interno del tag li di una lista ordinata tag ul contenuta nell' id orizzontale. Questa regola definisce che gli elementi specificati avranno un'altezza di 21 pixel, un margine superiore di 37 pixel e quello destro di 25 pixel, nessun tipo di decorazione nel testo, uno spazio di 10 pixel dall'elemento vicino ed un orienramento verso sinistra.

#Orizzontale ul li a {
height: 21px;
margin-top: 37px;
margin-right:25px;
text-decoration: none;
padding: 10px;
float: left;
}

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.

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

Mentre quando passeremo con il cursore del mouse sopra il precedente tag a il colore di sfondo diventerà giallo.

#Orizzontale ul li a:hover { background-color: #FFFF00; }

Come ultima regola definiamo una classe current che identifica il comportamento di un collegamento quando corrisponde alla pagina attuale. Questa regola definisce che lo sfondo muterà in giallo, avrà un bordo inferiore di 7 pixel, la sua forma sarà una riga continua di colore verde con una spaziatura dal fondo di 3 pixel.

#Orizzontale ul li.current a:link {
background-color: #FFFF00;
border-bottom-width: 7px;
border-bottom-style: solid;
border-bottom-color: #00FF00;
padding-bottom: 3px;
}

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

COMMENTI