Vai ai contenuti

LAU



Home > Menu Design > Button Menu (6)


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:

<div id="container-button-6">
 <ul id="button-6">
  <li id="active-button-6"><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>
</div>

CSS:

div#container-button-6{ 
background:url(strada.jpg) no-repeat;
width:200px;
font:90% Arial;
letter-spacing:.1em;
}
#button-6{
filter: alpha(opacity=60);
opacity: 0.6;
width: 200px;
background: #fff;
font-size:1.3em;
list-style:none;
margin:0;
padding:0;
}
#button-6 li{
display:inline;
}
#button-6 a{
height:50px!important;
height:65px;
}

#button-6 li a{
display:block;
text-decoration:none;
padding:7px 10px;
margin:0;
background:#999;
color:#009;
font-size:1.1em;
font-weight:bold;
}
#button-6 a:link, 
#button-6 a:visited{
color:#fff;
background:#333;
border-bottom:1px solid #666;
}
#button-6 a:hover, 
#button-6 a:focus,
#button-6 a:active{
color:#fff;
background:#666;
border-bottom:1px solid #999;
text-align:right;
}
#button-6 #active-button-6 a{
color:#fff;
background:#666;
border-bottom:1px solid #999;
text-align:right;
}

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 ]