This is some text prior to the author information. You can change this text from the admin section of WP-Gravatar To change this standard text, you have to enter some information about your self in the Dashboard -> Users -> Your Profile box. 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:
1 2 3 4 | <ul id="menu"> <li id="uno"><a href="#1" title="Vista style menu">Vista style menu</a></li> <li id="due"><a href="#2" title="Programmando.net" class="selected">Programmando.net</a></li> </ul> |
ora inseriamo il codice css tra i tag <head> della nostra pagina:
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 | <style> /* @author: Stefano Guglielmi @site: www.programmando.net */ 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.
Segnala presso:
Premetto che a mio avviso non è il modo migliore di realizzare una cosa del genere, per alcuni motivi quali ad esempio la presenza di un height: 0 per nascondere il testo, le immagini etc.
La cosa poteva essere molto piu semplice creando un div contenitore che mettesse lo sfondo al menu, e successivamente agli ul li , con dimensione fissa ma non necessariamente, veniva settata un’immagine di background diversa, a seconda se il link selezionato eta attivo o meno. Anche perchè in questo modo non c’è la necessità di settare il backgroun-position al negativo e non c’è necessità di creare un’immagine per ogni link.
sull uso di height:0px concordo con te, ma il resto del tuo ragionamento non lo capisco..
“non c’è necessità di creare un’immagine per ogni link”: io ho creato un’ immagine per ogni stato della barra (hover,selected,active) e non di ogni link!
“non c’è la necessità di settare il backgroun-position al negativo”: se tu setti un’ immagine di sfondo della barra di navigazione al cambiare dello stato del link e non la sposti a sinistra di tanti pixel quanto la lunghezza dei bottoni precedenti, verrà raprresentata di default dall’ inizio dell’ immagine, cioè a iniziare dal bordo sinistro, quindi non avrai la porzione esatta di immagine che rappresenta il bottone negli altri stati (hover,active,…)