Il codice HTML Il codice CSS - francescofumelli.altervista.com

menuorizzontale_verticale_css
10/01/15 11:45
MENU ORIZZONTALE IN CSS
Il codice HTML
Il codice HTML è 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
Il foglio di stile per formattare la lista come menu verticale
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;
Pagina 1 di 4
background-­‐color: #FF831C;
menuorizzontale_verticale_css
border-­‐bottom: 5px solid #54BAE2;
10/01/15 11:45
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;
}
Proprietà di lista usate
•
float settato sul valore left;
•
un margine destro e sinistro;
•
bordo inferiore anziché sinistro.
Pagina 2 di 4
menuorizzontale_verticale_css
10/01/15 11:45
La modifica più importante riguarda la proprietè float.
Impostando su left il valore abbiamo affiancato gli elementi
della lista anziché visualizzarne uno per riga in verticale.
Se volessimo il menu verticale? Basta modificare il CSS
MENU VERTICALE IN CSS
ul#menu {
font-­‐family: Verdana, sans-­‐serif;
font-­‐size: 12px;
margin: 0;
padding: 0;
list-­‐style: none;
}
ul#menu li {
background-­‐color: #FF831C;
border-­‐left: 5px solid #54BAE2;
display: block;
width: 150px;
height: 30px;
margin: 2px 0;
}
Pagina 3 di 4
menuorizzontale_verticale_css
10/01/15 11:45
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;
}
ul#menu li.active, ul#menu li:hover {
background-­‐color: #54BAE2;
border-­‐left: 5px solid #FF831C;
}
Pagina 4 di 4