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

Esempio