Vai ai contenuti

LAU



Home > Menu Design > Tab Menu (7)


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="menu-7">
 <ul>
  <li id="voce-corrente-7">
	<a 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>
</div>

CSS:

#TabMenu-7{
width:100%;
font-size: 90%;
text-transform:lowercase;
font-family:"Bookman Old Style", "Comic Sans MS";
}
#TabMenu-7 ul{
margin:0;
padding-left: 0;
list-style:none;
}
#TabMenu-7 li{
font-size:1.2em;
display:inline;
margin:0;
padding:0;
}
#TabMenu-7 a:link, 
#TabMenu-7 a:visited{
float:left;
background:#069 url("TabMenu-7.png") left top no-repeat;
color:#fff;
margin:0;
padding:8px;
text-decoration:none;
border-right:1px solid #fff;
}
#TabMenu-7 a:hover, 
#TabMenu-7 a:focus, 
#TabMenu-7 a:active{
color:#FFF;
background: url("TabMenu-7h.png");
text-decoration:underline;
}
#TabMenu-7 #voce-corrente-7 a{
color:#FFF;
background: url("TabMenu-7h.png");
text-decoration:underline;
}

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 ]