Menu di navigazione con voci orizzontali formattate con i CSS

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.

menu orizzontale
Menu orizzontale non formattato

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.

menu orizzontale
Menu orizzontale formattato con i CSS

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 è:

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

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.

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.

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;
}  

In ultimo veniamo alla scrittura del codice per le voci nello stato :hover per le quali cambierà il colore del bordo inferiore, questa volta di colore nero:

#navigation li a:hover{
border-bottom: 3px solid #000; 
background: #e6e6e6;
} 

Creare le classi per ogni voce nello stato :hover

Questo è l'ultimo passaggio del nostro articolo nel quale creeremo una classe per ogni singola voce e nella quale vedremo il cambio di colore di background. Permettetemi una piccola parentesi sul nome da assegnare alle classi. Personalmente non amo dare alle classi, così come agli elementi con ID univoco, dei nomi "a casaccio". Secondo me denota, una cosa del genere, un pò di superficialità e disordine. A questo aggiungo anche che se dovessi riprendere tra un mese, o tra un anno, il foglio di stile per apportare una modifica o cercare una cosa già fatta, non ricorderei più cosa ho voluto indicare con classi del tipo:

Analizziamo quello che è il testo da linkare e vediamo se possiamo dare un nome più esplicativo; per esempio:

Rivedendo un attimo l'immagine che ho inserito all'inizio dell'articolo, e confrontandola con i nomi delle classi che ho appena istanziato, risulterà facile fare subito una associazione. Infatti le nostre classi saranno:

#navigation li.home a:hover{background: #BAD700;} 
#navigation li.css a:hover{background: #FFC900;} 
#navigation li.asp a:hover{background: #FF8957;} 
#navigation li.xml a:hover{background: #33CCFF;} 
#navigation li.xslt a:hover{background: #1CB733;}

È più semplice o no? Comunque... questo è quanto per il nostro menu. Una pagina completa dell'esempio renderà meglio l'idea.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati