- Learn
- Guida CSS Tecniche essenziali
- Menu orizzontale statico con le liste
Menu orizzontale statico con le liste
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.
Se vuoi aggiornamenti su Menu orizzontale 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
React vs Angular: questione di punti di vista
Angular 2 e ReactJS rappresentano oggi la nuova frontiera dello sviluppo javascript frontend. Ma in cosa si differenziano e quali […]