All postsIn questo post vedremo come simulare il menù di windows.com utilizzando le tre immagini ottenute con il precedente tutorial (nav.gif, selected.gif, hover.gif), questo è il risultato finale.
Innanzitutto creiamo un file vista.html e scriviamo il codice xhtml necessario per visualizzare il menù con i link:
<ul id="menu">
<li id="uno"><a href="#1" title="Vista style menu">Vista style menu</a></li>
<li id="due"><a href="http://www.deswign.com" title="Deswign.com" class="selected">Deswign.com</a></li>
</ul>
<li id="uno"><a href="#1" title="Vista style menu">Vista style menu</a></li>
<li id="due"><a href="http://www.deswign.com" title="Deswign.com" class="selected">Deswign.com</a></li>
</ul>
ora inseriamo il codice css tra i tag <head> della nostra pagina:
<style>/*
@author: SW
@site: www.deswign.com
*/
body {
text-align:center;
margin:0;
padding:0;
}
#menu {
background: url(nav.jpg) no-repeat; /* = path immagine di default della barra */
width: 342px; /* = larghezza immagine */
height: 30px; /* = altezza immagine */
margin: 55px auto; /* cambiare il valore 55 per impostare la distanza dal margine superiore e inferiore della barra */
}
ul,li {
padding:0;
margin:0;
}
#menu li {
float:left;
display: inline;
overflow: hidden;
height:30px; /* = altezza dell\\\\\\\\\\' immagine */
}
#menu li a {
float: left;
height: 0px;
padding-top: 30px; /* = altezza dell\\\\\\\\\\' immagine */
overflow: hidden;
}
#menu li a:hover {
background: url(hover.jpg) no-repeat; /* =path immagine stato hover della barra */
}
#menu li a.selected {
background: url(selected.jpg) no-repeat; /* =path immagine stato selected della barra */
}
li#uno a {
width:142px; /* = larghezza bottone del primo link */
}
li#due a {
width:137px; /* =larghezza bottone del secondo link */
}
li#uno a:hover, li#uno a:active, li#uno a.selected {
background-position:0px 0px;
}
li#due a:hover, li#due a:active, li#due a.selected {
background-position:-142px 0px; /* = larghezza bottone link1 (142px) */
} </style>
@author: SW
@site: www.deswign.com
*/
body {
text-align:center;
margin:0;
padding:0;
}
#menu {
background: url(nav.jpg) no-repeat; /* = path immagine di default della barra */
width: 342px; /* = larghezza immagine */
height: 30px; /* = altezza immagine */
margin: 55px auto; /* cambiare il valore 55 per impostare la distanza dal margine superiore e inferiore della barra */
}
ul,li {
padding:0;
margin:0;
}
#menu li {
float:left;
display: inline;
overflow: hidden;
height:30px; /* = altezza dell\\\\\\\\\\' immagine */
}
#menu li a {
float: left;
height: 0px;
padding-top: 30px; /* = altezza dell\\\\\\\\\\' immagine */
overflow: hidden;
}
#menu li a:hover {
background: url(hover.jpg) no-repeat; /* =path immagine stato hover della barra */
}
#menu li a.selected {
background: url(selected.jpg) no-repeat; /* =path immagine stato selected della barra */
}
li#uno a {
width:142px; /* = larghezza bottone del primo link */
}
li#due a {
width:137px; /* =larghezza bottone del secondo link */
}
li#uno a:hover, li#uno a:active, li#uno a.selected {
background-position:0px 0px;
}
li#due a:hover, li#due a:active, li#due a.selected {
background-position:-142px 0px; /* = larghezza bottone link1 (142px) */
} </style>
settaggio: (se dovete applicarlo con immagini di diverse dimensioni) modificare tutti quei valori nel css che hanno un commento al lato;
uso: dovete solamente applicare la classe “selected” al tag <a> quando volete che un link sia selezionato;
testato su: Firefox, IE7/6/5, Opera, Safari.