menu : background-color pour chaque élément ?

**evevev** · 18/10/2009, 08h49

Bonjour à tous !

J'ai un menu qui est fait comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
ul.MenuBarVertical
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: 8em;
}
 
ul.MenuBarActive
{
	z-index: 1000;
}
 
ul.MenuBarVertical li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 8em;
}
 
ul.MenuBarVertical ul
{
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: absolute;
	z-index: 1020;
	cursor: default;
	width: 8em;
	left: -1000em;
	top: 0;
	margin-left: 8em;
	margin-top: -5px;
}
 
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
	left: 0;
}
 
ul.MenuBarVertical ul li
{
	width: 8.2em;
}
 
 
ul.MenuBarVertical
{
	border: 1px solid #CCC;
}
 
ul.MenuBarVertical ul
{
	border: 1px solid #CCC;
}
 
ul.MenuBarVertical a
{
	display: block;
	cursor: pointer;
	background-color: #EEE;
	padding: 0.3em 0.4em;
	color: #333;
	text-decoration: none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: solid #FFCC00 1px;
	font-weight: bold;
}
 
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
	background-color: #A0C8E2;
	color: #FFF;
}
 
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
	background-color: #A2CAE4;
	color: #333;
}
 
 
ul.MenuBarVertical a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 97% 50%;
	color: #333;
}
 
 
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 97% 50%;
}
 
 
ul.MenuBarVertical iframe
{
	position: absolute;
	z-index: 1010;
	filter:alpha(opacity:0.1);
}
 
@media screen, projection
{
	ul.MenuBarVertical li.MenuBarItemIE
	{
		display: inline;
		f\loat: left;
		background: #FFF;
	}
}

... j'aimerais bien que le background-color de chacun des éléments survolés soit différents les uns des autres.... C'est possible, ou ça le sera quand les poules auront des dents ?
Et si oui, pouvez-vous me donner une piste ?
Merci d'avance !

EV

**sebhm** · 18/10/2009, 11h55

Bonjour,

c'est toujours bien d'avoir le code HTML associé pour comprendre comment ton menu est fait.

Si c'est cette portion qui donne la couleur de fond

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
	background-color: #A0C8E2;
	color: #FFF;
}

alors, il suffit de nommer chacun de tes liens différemment (en précisant un id), et tu pourras alors préciser chaque fond

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
ul.MenuBarVertical a#id_lien1:hover, ul.MenuBarVertical a#id_lien1:focus
{
	background-color: #A0C8E2;
	color: #FFF;
}
ul.MenuBarVertical a#id_lien2:hover, ul.MenuBarVertical a#id_lien2:focus
{
	background-color: #ABEF48;
	color: #FFF;
}

tu peux utiliser les classes de la meme facon

**evevev** · 18/10/2009, 14h19

Bonjour ! et merci de ta réponse !

J'ai essayé de comprendre et d'adapter ce que tu me dis, mais bon... ça marche pas

Probablement parce que je ne sais pas nommer correctement le lien.
Voilà le code du tableau. J'ai mis en rouge les deux premiers éléments du menu.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<table width="100%" border="0" cellpadding="5" cellspacing="0">
              <!--DWLayoutTable-->
            
                <td  width="210" height="500" valign="top">
                <p class="soustitre">Vos vacances</p>
                <ul id="MenuAnnee" class="MenuBarVertical">
                  
  <li> <a id="1" class="MenuBarItemSubmenu" href="#">Locations</a>     <ul>
      <li><a href="#" class="MenuBarItemSubmenu">Vous cherchez une location</a>
        <ul>
          <li><a href="#">Par commune</a></li>
          <ul>
            <li><a href="#">Crozon-Morgat</a></li>
            <li><a href="#">Camaret</a></li>
            <li><a href="#">Lanvéoc</a></li>
            <li><a href="#">Telgruc</a></li>
            <li><a href="#">Roscanvel</a></li>
            <li><a href="#">Argol</a></li>
            <li><a href="#">Landévennec</a></li>
          </ul>
          <li><a href="#">Par cat&eacute;gorie</a></li>
          <ul>
            <li><a href="#">Maisons</a></li>
            <li><a href="#">Appartements</a></li>
            <li><a href="#">Chambres d'h&ocirc;tes</a></li>
            <li><a href="#">Mobil-home, yourtes...</a></li>
          </ul>
        </ul>
      </li>
      <li><a href="#">H&ocirc;tels</a></li>
      <li><a href="#">Campings</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Vous proposez une location</a>
        <ul>
<li><a href="#">Inscrire votre location</a></li>
<ul>
  <li><a href="#">Modifier votre annonce</a></li>
  <li><a href="#">Ajouter des photos</a></li>
  <li><a href="#">Actualiser votre calendrier de r&eacute;servation</a></li>
  <li><a href="#">Supprimer votre annonce</a></li>
</ul>
          <li><a href="#">G&eacute;rer votre annonce de location</a></li>
        </ul>
      </li>
    </ul>
  </li>
   <li><a  id="2" href="#">Festivit&eacute;s</a></li> <li><a href="#" class="MenuBarItemSubmenu">La mer</a>
  <ul>
      <li><a href="#" class="MenuBarItemSubmenu">Les plages</a>
        <ul>
          <li><a href="#">La Palue</a></li>
          <li><a href="#">...</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">La p&ecirc;che &agrave; pieds</a>
        <ul>
          <li><a href="#">R&egrave;glementations</a></li>
          <li><a href="#">Interdiction temporaire</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Les mar&eacute;es</a>
        <ul>
          <li><a href="#">Horaires des mar&eacute;es 2010</a></li>
          <li><a href="#">Comment &ccedil;a marche ?</a></li>
        </ul>
      </li>
      <li><a href="#">M&eacute;t&eacute;o marine</a></li>
<li><a href="#">Attention danger !</a></li>
  </ul>
  </li>
<li><a href="#" class="MenuBarItemSubmenu">Se promener...</a>
  <ul>
    <li><a href="#">Autour de Crozon</a></li>
    <li><a href="#">Autour de Camaret</a></li>
    <li><a href="#">Autour de Lanv&eacute;oc</a></li>
    <li><a href="#">Autour de Telgruc</a></li>
    <li><a href="#">Autour de Roscanvel</a></li>
    <li><a href="#">Autour d'Argol</a></li>
    <li><a href="#">Autour de Land&eacute;vennec</a></li>
    </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Se restaurer...</a>
  <ul>
    <li><a href="#" class="MenuBarItemSubmenu">March&eacute;s de la presqu'&icirc;le</a>
      <ul>
        <li><a href="#">Le march&eacute; de Crozon</a>
          <ul>
            <li><a href="#">Les p&ecirc;cheurs de la presqu'&icirc;le</a></li>
            <li><a href="#">Les producteurs locaux</a></li>
            </ul>
          </li>
        <li><a href="#">Le march&eacute; de Camaret</a></li>
        <li><a href="#">Le march&eacute; de Telgruc</a></li>
        </ul>
      </li>
    <li><a href="#" class="MenuBarItemSubmenu">Recettes de vacances avec les produits locaux</a>
      <ul>
        <li><a href="#">Poissons et crustac&eacute;s de nos c&ocirc;tes</a></li>
        <li><a href="#">Fruits de mer et coquillages</a></li>
        <li><a href="#">Autres recettes simples d'ici et d'ailleurs</a></li>
        </ul>
      </li>
    <li><a href="#">Restaurants</a></li>
    <li><a href="#">Cr&ecirc;peries</a></li>
    </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Loisirs - sorties</a>
  <ul>
<li><a href="#">La piscine</a></li>
<li><a href="#">Les vieux m&eacute;tiers vivants</a></li>
<li><a href="#">La maison des min&eacute;raux</a></li>
<li><a href="#">Les cin&eacute;mas</a></li>
    <li><a href="#" class="MenuBarItemSubmenu">Pas tr&egrave;s loin d'ici...</a>
      <ul>
        <li><a href="#">Oc&eacute;anopolis</a></li>
        <li><a href="#">Le pont de T&eacute;r&eacute;nez</a></li>
        </ul>
    </li>
    </ul>
</li>

</ul>
                 
                  <p  align="center" class="soustitre">La vie sur la presqu'&icirc;le</p>
                  <ul id="MenuBar2" class="MenuBarVertical">
                    <li><a href="#">Acteurs et spectateurs (<em>photos</em>)</a>
                      <ul>
                        <li><a href="#">... au pardon de Roscanvel</a></li>
                        <li><a href="#">... &agrave; la f&ecirc;te patronale de Telgruc</a></li>
                        <li><a href="#">... au pardon de Camaret</a></li>
                        <li><a href="#">... &agrave; la Maison des vieux m&eacute;tiers vivants d'Argol</a></li>
                        <li><a href="#">... &agrave; Camaret, au d&eacute;part de la 2e Paddle Cup</a></li>
                      </ul>
                    </li>
                    <li><a href="#" class="MenuBarItemSubmenu">Associations</a>
                          <ul>
                            <li><a href="#">Liste alphab&eacute;tique</a></li>
                            <li><a href="#">Liste par cat&eacute;gorie</a></li>
                            <ul>
                              <li><a href="#">... culturelles</a></li>
                              <li><a href="#">... patrimoniales</a></li>
                              <li><a href="#">... patriotiques</a></li>
                              <li><a href="#">... scolaires</a></li>
                              <li><a href="#">... solidaires</a></li>
                              <li><a href="#">... sportives</a></li>
                              <li><a href="#">... toutes les autres !</a></li>
                            </ul>
                            <li><a href="#">Inscrire votre association</a></li>
                            <li><a href="#">Actualiser la page de votre association</a></li>
                          </ul>
                        </li>
<li><a href="#">Covoiturons !</a>                    </li>
                    <li><a href="#" class="MenuBarItemSubmenu">La mer</a>
                      <ul>
                        <li><a href="#" class="MenuBarItemSubmenu">Les travailleurs de la mer</a>
                          <ul>
                            <li><a href="#">En mer, avec les p&ecirc;cheurs</a></li>
                            <li><a href="#">La p&ecirc;che aux tellines</a></li>
                            <li><a href="#">Hu&icirc;tres et moules</a></li>
                            <li><a href="#">Bassier</a></li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                    <li><a class="MenuBarItemSubmenu" href="#">Presqu'&icirc;le pratique</a>
  <ul>
    <li><a href="#" class="MenuBarItemSubmenu">Petites annonces gratuites</a>
      <ul>
        <li><a href="#">Mettre une annonce</a></li>
        <li><a href="#">Lire les annonces</a></li>
        </ul>
      </li>
<li><a href="#" class="MenuBarItemSubmenu">Horaires transports</a>
  <ul>
<li><a href="#">Horaires bus</a></li>
        <li><a href="#">Horaires SNCF</a></li>
        <li><a href="#">Vers les &icirc;les</a></li>
        </ul>
      </li>
    <li><a href="#">Eph&eacute;m&eacute;ride</a></li>
    <li><a href="#" class="MenuBarItemSubmenu">Les 7 communes</a>
      <ul>
        <li><a href="#">La communaut&eacute; de communes</a></li>
        <li><a href="#">Crozon</a></li>
        <li><a href="#">Camaret</a></li>
        <li><a href="#">Lanv&eacute;oc</a></li>
        <li><a href="#">Telgruc</a></li>
        <li><a href="#">Roscanvel</a></li>
        <li><a href="#">Argol</a></li>
        <li><a href="#">Land&eacute;vennec</a></li>
        </ul>
      </li>
<li><a href="#" class="MenuBarItemSubmenu">Services sant&eacute;</a>
  <ul>
    <li><a href="#">Pharmacies de garde</a></li>
    <li><a href="#">Bobos d'&eacute;t&eacute; &agrave; &eacute;viter</a></li>
    </ul>
</li>
    </ul>
</li>
                  </ul>
<p  align="center" class="soustitre">&nbsp;</p></td>
              </tr>
            </table>

et dans le css, j'ai fait ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
ul.MenuBarVertical a#id1:hover, ul.MenuBarVertical a#id1:focus
{
	background-color: #A0C8E2;
	color: #FFF;
}
ul.MenuBarVertical a#id2:hover, ul.MenuBarVertical a#id2:focus
{
	background-color: #ABEF48;
	color: #FFF;
}

**sebhm** · 18/10/2009, 15h13

si tu fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ul.MenuBarVertical a#id1:hover

alors, tu dois appeler ton id = "id1"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a id="id1" class="MenuBarItemSubmenu" href="#">Locations</a>

désolé de mon exemple qui t'a embrouillé à cause du mot 'id'

**evevev** · 18/10/2009, 15h46

ok ! Ca fonctionne merci beaucoup.

J'ai appelé les liens boum, tac, toc, comme ça, pas de confusion ! J'avais pas bien pigé en fait...

Une dernière question quand même : je prends l'exemple du troisième élément de mon menu, la mer, qui a 5 sous-menus... Quand je vais survoler la mer, pour que les 5 sous-menus soient de la même couleur (tant qu'à faire !), est-ce que je dois donc donner un id à chaque lien comme tu me l'as expliqué, ou y a-t-il un "raccourci" ou une façon de faire plus rapide ?
Je ne demande pas ça par flemme, mais je me dis que ça risque de faire un code lourdingue, non, si je rajoute plein d'éléments et de sous ou sous-sous-menus ?

**sebhm** · 18/10/2009, 16h40

il y a une solution : il faut utiliser l'ID du conteneur.
En l'occurence, le conteneur n'est pas le lien (car la balise <a> n'en contient pas d'autres) mais c'est la balise <li> qui va contenir une nouvelle liste <ul>, cette derniere contenant tes sous-menus.

Tu auras donc un truc du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<li id="li_la_mer">
  <a href="#" class="MenuBarItemSubmenu">La mer</a>
  <ul>
    <li>
      <a href="#" class="MenuBarItemSubmenu">Les plages</a>
      <ul>
        <li><a href="#">La Palue</a></li>
        <li><a href="#">...</a></li>
      </ul>
    </li>
    <li>
      <a href="#" class="MenuBarItemSubmenu">La p&ecirc;che &agrave; pieds</a>
      <ul>
        <li><a href="#">R&egrave;glementations</a></li>
        <li><a href="#">Interdiction temporaire</a></li>
      </ul>
    </li>
    <li>
      <a href="#" class="MenuBarItemSubmenu">Les mar&eacute;es</a>
      <ul>
        <li><a href="#">Horaires des mar&eacute;es 2010</a></li>
        <li><a href="#">Comment &ccedil;a marche ?</a></li>
      </ul>
    </li>
    <li>
      <a href="#">M&eacute;t&eacute;o marine</a>
    </li>
    <li>
      <a href="#">Attention danger !</a>
    </li>
  </ul>
</li>

tu veux alors lui dire que tous les sous-menus du <li> "li_la_mer" sont d'une certaine couleur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

li#li_la_mer ul a { background-color : ...}

ce qui signifie que tu traites tous les liens (a) qui se trouvent dans une liste (ul) qui elle meme se trouve dans un élément de liste (li) identifié par 'li_la_mer'

**evevev** · 18/10/2009, 17h10

Je te remercie infiniment... vraiment pour tes explications très claires !

Je vais garder précieusement une copie de ce post, ça me re-servira sûrement !
Bonne soirée à toi !

menu : background-color pour chaque élément ?

CSS

Discussions similaires

Partager

Partager