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:
1 2 3 4 5 6 7 8 | <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> |
e questo è il codice css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | /* @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.
http://www.adessofilm.com/, molto bello, io lo utilizzo sul mio sito
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 [...]