Vai ai contenuti

LAU



Home > Menu Design > Button Menu (5)


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="button-5">
  <li id="active-button-5"><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:

#button-5{
width:200px;
margin:0;
padding:0;
list-style:none;
color:#000;
font: 90% Arial;
letter-spacing:.1em;
font-variant:small-caps;
}
#button-5 li{
display:inline;
}
#button-5 a{
height:auto!important;
height:0;
}
#button-5 a{
display:block;
text-decoration:none;
padding:6px 4px;
background:#ffc;
font-size:1.2em;
border-bottom:1px solid #e0c178;
}
#button-5 a:link, 
#button-5 a:visited{
background:#ffc;
color:#900;
padding-left:12px;
}
#button-5 a:hover, 
#button-5 a:focus,
#button-5 a:active{
background:#ecdfaa;
color:#900;
border-left:5px solid #900;
padding-left:7px;
}
#button-5 #active-button-5 a{
background:#ecdfaa;
color:#900;
border-left:5px solid #900;
padding-left:7px;
}

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 ]