Programmazione Web » Css » Creare un menu con banda laterale
Creare un menu con banda laterale
Difficoltà:
Scritto da Alberto Giuliani
Sito Web: http://www.agwebsolutions.it 
Questo tutorial è stato letto 1193 volte
I CSS permettono di gestire a pieno le caratteristiche dei links, e nel nostro caso dei menu. In questo tutorial realizzeremo un menu applicabile in maniera efficace nella barra laterale del nostro sito. Per avere un'idea di ciò che vogliamo realizzare, vedete questo esempio.
Come visibile nella pagina, ogni link dispone di una banda laterale che al passaggio del mouse si evidenzia cambiando colore.
Un listato di questo tipo è sicuramente molto elegante, nonchè applicabile a molti layout.
La banda laterale è un bordo di 4px applicato alla sinistra del link. Realizziamo la classe CSS linklist che assegneremo ai links:
.linklist {
padding:4px;
margin:2px;
}
.linklist a:link {
color:#FFF;
border-left:4px solid #B8CCDD;
text-decoration:none;
display:block;
margin:2px;
padding:2px;
}
.linklist a:visited {
color:#FFF;
border-left:4px solid #B8CCDD;
text-decoration:none;
padding:2px;
margin:2px;
display:block;
}
.linklist a:hover {
color:#FFFF00;
border-left:4px solid #FFF;
text-decoration:none;
padding:2px;
margin:2px;
display:block;
}
Come si può vedere, la classe linklist è trattata nei caratteri generali, che riguardano la posizione dell'insieme dei links, quindi nei tre stati dei links:
- A:LINK - che indica le caratteristiche di un link attivo, in cui abbiamo settato un bordo sinistro di 4px;
- A:VISITED - che indica le caratteristiche di un link già cliccato dall'utente, in cui abbiamo riportato le informazioni del link attivo;
- A:HOVER - che indica le caratteristiche di un link al passaggio del mouse, in cui abbiamo modificato il colore del bordo.
Elemento chiave quindi del tutorial è
border-left:4px solid #FFF;
la riga in cui si assegna al link il bordo sinistro.
In secondo luogo, è importante anche il gioco di padding e margin, i due elementi che indicano la spaziatura tra un link e l'altro.
Aggiungi questo tutorial ai preferiti
