Vai ai contenuti

LAU



Home > Menu Design > Crossbar Menu (1)


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


(X)HTML:

<ul id="Nav">
 <li id="act"><a id="cur" 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#Nav{
list-style:none;
font: 90% Arial, Helvetica, sans-serif;
}
ul#Nav li{
margin:0;
padding:0;
display:inline;
font-size:1.2em;
}
ul#Nav li a:link,
ul#Nav li a:visited{
padding:.3em .5em;
background:url(crossbar1.png) 0 0 repeat;
color:#EEA879;
font-weight:bold;
text-decoration:none;
border-top:4px solid #EEA879;
}
ul#Nav li a:hover,
ul#Nav li a:focus,
ul#Nav li a:active{
padding:.3em .5em;
background:url(crossbar1.png) 0 0 repeat;
color:#dd5800;
font-weight:bold;
text-decoration:none;
border-top:4px solid #EEA879;
}
ul#Nav li a#cur{
padding:.3em .5em;
background:url(crossbar1.png) 0 0 repeat;
color:#dd5800;
font-weight:bold;
text-decoration:none;
border-top:4px solid #EEA879;
}

torna su

torna alla lista completa dei menu



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]