• Programmazione » CSS » Tutorial CSS

Pagina 1 di 2

Ancora un articolo su una barra di navigazione? Chiedo scusa ma... mentre realizzavo l'esempio, ho pensato di scrivere questo semplice e breve tutorial che potrebbe apportare (nessuna presunzione, sia chiaro) una nota di colore simpatica e di effetto nelle nostre pagine. Come sempre ho scritto e sostenuto, quelle che io espongo sono delle proposte che possono essere adattate e modificate a seconda delle proprie esigenze. Dunque... partiamo con una spiegazione, dopo la mia introduzione, su cosa otterremo al termine dell'articolo: un menu orizzontale a tab con la particolarità che sullo stato :hover di ogni singola voce, avremo un colore di sfondo diverso dagli altri. Il tutto verrà realizzato senza nessuna immagine e si useranno semplicemente i colori assegnati tramite i CSS. Per comprendere meglio il tutto, ho preparato 2 immagini:

nella prima è raffigurato il menu con le 5 voci senza nessuna pseudoclasse attivata.

in questa successiva, invece, la stessa barra di navigazione con i 5 stati :hover attivati. Li ho raccolti in un'unica immagine anzichè inserirne 5 diverse.

Il codice CSS

Passiamo adesso alla scrittura del codice per la costruzione del nostro menu orizzontale. Ho definito, attraverso un elemento unico, il nome della barra di navigazione e l'ho chiamata, con molta fantasia, #navigation. Il suo codice è:

Dato che ci saranno elementi float (le liste), è necessario poterli contenere in un elemento "genitore" a sua volta reso float. In sostanza, basterà specificare le dimensioni e rendere float la lista. Se non è possibile assegnare una larghezza in pixel o in em ecc..., basta dichiarare, come nel nostro caso, una larghezza impostata sul valore auto. Verranno poi eliminati margini, il padding e il marcatore.

    #navigation{
margin: 0;
padding: 0;
list-style-type: none;
background: #e6e6e6;
float:left;
width:auto;
}

Ora dobbiamo scrivere le dichiarazioni per gli elementi <li> della lista.

Annulliamo, come sempre, i margini ed il padding e dichiariamo ogni singola voce display: inline perchè il nostro sarà, appunto, un elenco orizzontale.

    #navigation li{
padding: 0;
margin: 0;
display: inline;
background: #e6e6e6;
}

Siamo giunti alla parte centrale dell'esempio, settando lo stato di collegamento delle voci linkate. Ache in questo caso, verranno rese float per in modo tale da "adattarsi" in larghezza. Da ricordare una nota teorica importante: un elemento float è reso automaticamente block-level (elemento di blocco). Verrà specificato un padding sinistro e destro di 0.6 em; superiore ed inferiore pari a 1.5 em. Verrà infine eliminata la sottolineatura ed assegnato il colore del bordo inferiore pari a 3 pixel:

    #navigation li a{
float: left;
color: #000;
border-bottom: 3px solid #666;
background: #e6e6e6;
text-decoration: none;
padding: .6em 1.5em;
}

Continua >>>