DMOZ, lo scandalo dei ricatti Usare la Virtualizzazione come workaround della GPLv3
Aug 28

Mac style menu con il css

di Stefano GuglielmiCSS, HowTo, WebDesign

Adesso 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

<div id="header">
<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="#" title="Programmando.net" class="selected">Programmando.net</a></li>
<li id="four"><a href="#" title="four">four</a></li>
</ul>
</div>

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
116
117
118
119
120
121
122
123
124

/*
@author: Stefano Guglielmi
 
@site: www.programmando.net
 
*/
 
*{
 
margin:0; 	/* non modificare! */
 
padding:0; 	/* non modificare! */
 
}
 
body {
 
text-align:center;
 
}
 
#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#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 <a> quando volete che un bottone sia selezionato;

testato su: Firefox, IE7/6/5, Opera, Safari.

che vi pare?


(4 voti, media: 4.75 su 5)
Loading ... Loading ...

11 Responses to “Mac style menu con il css”

  1. viscido Says:
    September 23rd, 2007 at 3:40 am

    Complimenti per questi due tutorial, davvero ottimi!! Ti dispiace se li linko nel mio blog?

  2. Stefano Guglielmi Says:
    September 24th, 2007 at 6:29 pm

    @viscido: ovviamente no, linka pure.

  3. LuKe Says:
    October 29th, 2007 at 9:36 pm

    Anchio linko, ottimo tutorial !!
    Grandissimo !

  4. elektrojoke Says:
    November 11th, 2007 at 8:26 pm

    ciao volevo chiederti ma l\’immagine la devo modificare per creare il menu? o la uso cosi com\’è?

  5. Andrea Says:
    March 1st, 2008 at 6:00 pm

    Ma il menu della apple usa solo una immagine di sfondo posizionata a dovere.
    Credo sia molto meglio per questioni di caricamento.
    Se controlli bene il css apple te ne accorgi.

  6. Andrea Says:
    March 1st, 2008 at 7:38 pm

    é come pensavo io. Apple usa solo una immagine per tutti gli stati del bottone.
    Sicuramente meglio quando hai molti bottoni.
    Altrettanto vero però che usa molti più richiami css
    Se vuoi ti mando un codice pulito cosi se hai tempo proponi un secondo metodo :)

  7. Stefano Guglielmi Says:
    March 2nd, 2008 at 12:10 pm

    Ciao Andrea, scusami ma non capisco bene il tuo commento.. anch io uso una sola immagine per i diversi stati del menù (selected.gif,active.gif,etc..), poi perchè il codice non ti sembra pulito?

  8. Andrea Says:
    March 3rd, 2008 at 11:05 pm

    Ciao Stefano,
    in effetti non mi sono espresso molto bene e per questo ti chiedo scusa.
    per codice pulito non intendevo il tuo lavoro, che tra l’altro trovo davvero ben fatto, ma quello della apple che ovviamente essendo un gran sito e anche un bel po elaborato.
    Per pulito intendevo dire ti mando un file con solo i codici css necessari per il menu :).
    Poi per immagine unica intendevo proprio immagine unica per tutti gli stati del bottone.
    Apple una solo 1) menu.gif per intenderci con bottone a, a:active e a:hover. tu usi ameno tre immagini … appunto 1) nav.gif 2) selected.gif 3) active.gif.

    guarda qui

    http://images.apple.com/it/global/nav/images/globalnavbg.png

  9. Stefano Guglielmi Says:
    March 5th, 2008 at 12:39 am

    ora capisco meglio :) guarda non so quali delle due soluzioni sia meglio, ti posso dire che usando 3 immagini hai il problema del caricamento dell’ immagine nello stato hover, il tempo di attesa è minimo ma non è un bellissimo effetto (puoi testare su geekissimo) forse per questo hanno adottato l’ uso di una sola immagine, ciao.

  10. Andrea A. Says:
    March 15th, 2008 at 12:39 pm

    Ciao, volevo ringraziare tutti per l\’illustrazione di questo splendido menu\’, ve ne sono veramente grato.
    E\’ tanto che cercavo un menu\’ un po carino. Devo dire che nonostante le mie difficolta\’ nell\’usare photoshop dopo qualche nottata sono riuscito a fare un lavoro piu\’ che decente. Sei un grande stefano! saluti a tutti

  11. Paolo Beccari Says:
    June 16th, 2008 at 9:19 am

    Avevo scaricato tempo fa dal sito Appple l\’immagine che genera il menu: apriti cielo, sono rimasto mezz\’ora a studiare css e html ripromettendomi di replicarli e riutilizzarli…
    Stamattina avendo gran fretta di realizzarlo per risolvere un layout comlesso ho fatto una ricerca sperando di trovare un pò di supporto…
    Non mi aspettavo però di trovare il lavoro già pronto!
    Lo collaudo subito!
    Anche se la sfida a venirci fuori da solo era allettante non posso che ringraziare per il risparmio di tempo.
    …con CSS copiando si impara! Buon lavoro a tutti.

Inserisci il tuo Commento:

This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)

You must read and type the 5 chars within 0..9 and A..F, and submit the form.

  

Oh no, I cannot read this. Please, generate a