In una lezione di questa guida abbiamo visto come realizzare un menu verticale utilizzando le liste.
Tenendo come base lo stesso codice, realizzeremo in questa lezione un menu orizzontale utilizzando una lista non ordinata.
Il codice HTML
Il codice HTML che utilizzeremo è del tutto identico a quello utilizzato per l’altra lezione:
<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>
Il codice CSS
Anche il foglio di stile che utilizzeremo è molto simile a quello per la lista verticale, apporteremo solo alcune modifiche.
ul#menu {
font-family: Verdana, sans-serif;
font-size: 11px;
margin: 0;
padding: 0;
list-style: none;
}
ul#menu li {
background-color: #FF831C;
border-bottom: 5px solid #54BAE2;
display: block;
width: 150px;
height: 30px;
margin: 2px;
float: left; /* elementi su singola riga */
}
ul#menu li a {
color: #fff;
display: block;
font-weight: bold;
line-height: 30px;
text-decoration: none;
width: 150px;
height: 30px;
text-align: center;
}
ul#menu li.active, ul#menu li:hover {
background-color: #54BAE2;
border-bottom: 5px solid #FF831C;
}
Le modifiche che abbiamo apportato riguardano alcune proprietè dei list-item:
float
settato sul valoreleft
;- un margine destro e sinistro;
- bordo inferiore anziché sinistro.
La modifica più importante riguarda la proprietè float
. Impostando su left
il valore abbiamo affiancato gli elementi della lista anziché visualizzarne uno per riga.
Ecco l'esempio.