All postsAdesso useremo le immagini realizzate nel precedente tutorial per simulare gli effetti del menù di navigazione, questo è il risultato finale:Demo: Mac style menu
codice xhtml della nostra lista di link:
<p id="header"> </p>
<ul id="menu">
<li id="one"><a href="#" title="one">one</a></li>
<li id="two"><a href="#" title="Mac style menu">Mac style menu</a></li>
<li id="three"><a href="http://www.deswign.com" title="Deswign" class="selected">Deswign.com</a></li>
<li id="four"><a href="#" title="four">four</a></li>
</ul>
<ul id="menu">
<li id="one"><a href="#" title="one">one</a></li>
<li id="two"><a href="#" title="Mac style menu">Mac style menu</a></li>
<li id="three"><a href="http://www.deswign.com" title="Deswign" class="selected">Deswign.com</a></li>
<li id="four"><a href="#" title="four">four</a></li>
</ul>
e questo è il codice css:
/*
@author: SW
@site: www.deswign.com
*/
#header {
width: 452px; /* =larghezza immagine */
height: 37px; /* =altezza immagine */
margin: 5px auto; /* cambiare il valore 5 per impostare i pixel del margine superiore e inferiore della barra */
}
#header ul, #header li {
margin:0;
padding:0;
}
#header ul#menu li {
display: inline;
overflow: hidden;
height:37px; /* =l' altezza dell' immagine */
}
#header {
background: url(nav.gif) no-repeat; /* =path immagine di default della barra */
}
#header ul#menu li a {
float: left;
height: 0px;
padding-top: 37px; /* =l' altezza dell' immagine */
overflow: hidden;
}
#menu li a:hover {
background: url(hover.gif) no-repeat; /* =path immagine stato hover della barra */
}
#menu li a:active {
background: url(active.gif) no-repeat; /* =path immagine stato active della barra */
}
#menu li a.selected {
background: url(selected.gif) no-repeat; /* =path immagine stato selected della barra */
}
li#one a {
width:53px; /* =larghezza del bottone1 */
}
li#two a {
width:164px; /* =larghezza del bottone2 */
}
li#three a {
width:189px; /* =larghezza del bottone3 */
}
li#four a {
width:46px; /* =larghezza del bottone4 */
}
li#one a:hover,li#one a:active,li#one a.selected {
background-position:0px 0px;
}
li#two a:hover,li#two a:active,li#two a.selected {
background-position:-53px 0px; /* settare con la larghezza del bottone1 (53px) */
}
li#three a:hover,li#three a:active,li#three a.selected {
background-position:-217px 0px; /* = bottone1+ bottone2 (53px+164px) */
}
li#four a:hover,li#four a:active,li#four a.selected {
background-position:-406px 0px; /* = bottone1+bottone2+bottone3 (53px+164px+189px) */
}
@author: SW
@site: www.deswign.com
*/
#header {
width: 452px; /* =larghezza immagine */
height: 37px; /* =altezza immagine */
margin: 5px auto; /* cambiare il valore 5 per impostare i pixel del margine superiore e inferiore della barra */
}
#header ul, #header li {
margin:0;
padding:0;
}
#header ul#menu li {
display: inline;
overflow: hidden;
height:37px; /* =l' altezza dell' immagine */
}
#header {
background: url(nav.gif) no-repeat; /* =path immagine di default della barra */
}
#header ul#menu li a {
float: left;
height: 0px;
padding-top: 37px; /* =l' altezza dell' immagine */
overflow: hidden;
}
#menu li a:hover {
background: url(hover.gif) no-repeat; /* =path immagine stato hover della barra */
}
#menu li a:active {
background: url(active.gif) no-repeat; /* =path immagine stato active della barra */
}
#menu li a.selected {
background: url(selected.gif) no-repeat; /* =path immagine stato selected della barra */
}
li#one a {
width:53px; /* =larghezza del bottone1 */
}
li#two a {
width:164px; /* =larghezza del bottone2 */
}
li#three a {
width:189px; /* =larghezza del bottone3 */
}
li#four a {
width:46px; /* =larghezza del bottone4 */
}
li#one a:hover,li#one a:active,li#one a.selected {
background-position:0px 0px;
}
li#two a:hover,li#two a:active,li#two a.selected {
background-position:-53px 0px; /* settare con la larghezza del bottone1 (53px) */
}
li#three a:hover,li#three a:active,li#three a.selected {
background-position:-217px 0px; /* = bottone1+ bottone2 (53px+164px) */
}
li#four a:hover,li#four a:active,li#four a.selected {
background-position:-406px 0px; /* = bottone1+bottone2+bottone3 (53px+164px+189px) */
}
settaggio: modificare tutti quei valori nel css che hanno un commento al lato;
uso: dovete solamente applicare la classe “selected” al tag quando volete che un bottone sia selezionato;
testato su: Firefox, IE7/6/5, Opera, Safari.
One Trackback
[...] di partire per le feste vorrei segnalarvi un tutorial realizzato da un collega, nonchè amico. Il tutorial Mac style menu con i css è stato realizzato da Deswign ed è tutorial su come realizzare un menu simile a quello su [...]