- Learn
- Guida CSS Tecniche essenziali
- Menu verticale statico con le liste
Menu verticale statico con le liste
Oltre che per elencare una serie di elementi all'interno del testo, le liste sono soprattutto utilizzate come base per i menu (sia principali che secondari) all'interno delle pagine web. Per definizione, una lista non ordinata è utilizzata per visualizzare elementi che non presentano un ordinamento particolare quindi ben si adattano a questo utilizzo.
Vedremo in questa lezione come realizzare un menu verticale utilizzando le liste non ordinate.
Il codice HTML
Il codice HTML è davvero molto semplice:
<ul id="menu">
<li><a href="#">Home</a></li>
<li class="active"><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
Come possiamo vedere, abbiamo una lista non ordinata (<ul>
) e 5 elementi di lista (<li>
) con al loro interno un link.
Il codice CSS
Per personalizzare gli elementi della lista andremo ad agire sulle classiche proprietà quali margini, padding, background e così via. Innanzitutto eliminiamo eventuali margini, padding e marcatori con il seguente codice:
ul#menu {
font-family: Verdana, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
list-style: none;
}
A questo punto andiamo ad impostare un colore di sfondo, dimensioni 150px x 30px ed un bordo sinistro per i vari elementi della lista non ordinata:
ul#menu li {
background-color: #FF831C;
border-left: 5px solid #54BAE2;
display: block;
width: 150px;
height: 30px;
margin: 2px 0;
}
Non resta che assegnare lo stile al link ed il menu è quasi completo:
ul#menu li a {
color: #fff;
display: block;
font-weight: bold;
line-height: 30px;
padding-left: 15px;
text-decoration: none;
width: 135px; /* 150px - 15px (padding) */
height: 30px;
}
A questo punto il menu è già perfettamente funzionante. Possiamo però migliorarlo assegnando un colore di sfondo differente al passaggio del mouse e/o quando siamo all'interno della sezione corrispondente. Possiamo notare infatti che nel codice HTML creato precedentemente, nel secondo elemento della lista ho aggiunto una classe “active” che si può utilizzare per modificare lo stile della voce del menu.
ul#menu li.active, ul#menu li:hover {
background-color: #54BAE2;
border-left: 5px solid #FF831C;
}
Se vuoi aggiornamenti su Menu verticale statico con le liste inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Alberto Brandolini
Quali sono le ricette fondamentali per il Domain-Driven Design.