Vai ai contenuti

LAU

Home > Menu Design > Crossbar Menu (2)

Menu Design

Attraverso l' uso di semplici liste e dei CSS2 è possibile formattare un numero indefinito di menu orizzontali e verticali.

a cura di: Fabio Regina in collaborazione con Andrea Di Pizio | 29 maggio 2006

Crossbar Menu (2)

scarica il codice html e css

(X)HTML:

<ul id="navlist">
 <li id="active"><a id="current" href="#">Renoir</a></li>
 <li><a href="#">Monet</a></li>
 <li><a href="#">Cezanne</a></li>
 <li><a href="#">Manet</a></li>
 <li><a href="#">Degas</a></li>
</ul>

CSS:

ul#navlist{
list-style:none;
font: 90% Arial, Helvetica, sans-serif;
}
ul#navlist li{
margin:0;
padding:0;
display:inline;
font-size:1.2em;
}
ul#navlist li a{
padding:.3em .5em;
background:transparent;
color:#000;
font-weight:bold;
text-decoration:none;
border-bottom:4px solid #9ec630;
}
ul#navlist li a:hover{
padding:.3em .5em;
background:url(crossbar2.png) 0 0 repeat;
color:#000;
font-weight:bold;
text-decoration:none;
border-bottom:4px solid #9ec630;
}
ul#navlist li a#current{
padding:.3em .5em;
background:url(crossbar2.png) 0 0 repeat;
color:#000;
font-weight:bold;
text-decoration:none;
border-bottom:4px solid #9ec630;
}

torna su

torna alla lista completa dei menu

Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Dichiarazione di accessibilità

[ Torna all’inizio della pagina ]