Vai ai contenuti

LAU



Home > Menu Design > Cursor Menu


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="cursore">
 <li id="active-cursore"><a href="#">Renoir</a></li>
 <li><a href="#">Monet</a></li>
 <li><a href="#">Manet</a></li>
 <li><a href="#">Sisley</a></li>
 <li><a href="#">Degas</a></li>
</ul>

CSS:

#cursore{
width:100px;
margin:0;
padding:0;
list-style:none;
text-align:right;
font: 90% Arial;
}
#cursore a{
display:block;
text-decoration:none;
border-right:5px solid;
margin:0;
padding:5px 10px 5px 0;
background:#fff;
color:#000;
font-size:1.2em;
}
#cursore li{
display:inline;
}
#sample a{
height:auto!important;
height:0;
}
#cursore a:link, 
#cursore a:visited{
border-color:#dd5800;
text-decoration:none;
color:#dd5800;
}
#cursore a:hover, 
#cursore a:focus,
#cursore a:active{
border-color:#069;
text-decoration:none;
color:#069;
text-transform:uppercase;
}
#cursore #active-cursore a{
border-color:#069;
text-decoration:none;
color:#069;
text-transform:uppercase;
}

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 ]