Image de sous-menu déroulant

**solorac** · 04/10/2017, 15h00

Bonjour la Communauté,

Je reprends un dossier sur les sous-menus que j'avais fait il y a deux ou trois ans.

A l'époque, j'étais parti sur les images vierges pour afficher mes sous-menus. Aujourd'hui je voudrais mettre une image de bouton non vierge et je me rends compte que mon code n'est pas bon.

Voici le code html qui me semble bon :

Code html :

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
<ul id="menu2">
	<li><a href="#">&nbsp </a>	</li>
<li><a href="#">&nbsp </a> <!-- METTRE ESPACE --> 
		<ul>
			<li><a href="page2.html">&nbsp </a></li> <!--Qui sommes nous ?--> 
		 	<li><a href="page3.html">&nbsp </a></li> <!--iD RECHANGE membre <font color="#f39300">N!</font>--> 
			<li><a href="page4.html">&nbsp </a></li> <!-- Notre réseau -->
		</ul>
	</li>
<li><a href="#">&nbsp </a>
		<ul>
			<li><a href="page5.html">&nbsp </a></li><!--Nos plateformes--> 
			<li><a href="page6.html">&nbsp </a></li><!--Nos partenaires--> 
		</ul>
	</li>
  <li><a href="page7.html">&nbsp </a>	</li>
 
  <li><a href="page8.html">&nbsp;</a>    </li>
 
  <li><a href="page9.html">&nbsp </a>	</li>
 
</ul>

Et voici le code css :

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
/* Principal */
#menu2, #menu2 ul{
padding:0;
margin-top:3px;
list-style:none;
text-align:center;
font-weight:bold;
}
 
#menu2 li{
display:inline-block;
position:relative;
width:143px;
height:39px;
line-height:39px;
}
 
#menu2 ul li{
display:inherit;
}
 
#menu2 ul{
position:absolute;
max-height:0px;
overflow:hidden;
transition: 1.6s;
}
 
#menu2 li:hover ul{
max-height:156px;
}
 
/* background des liens menus */
#menu2 li:first-child{
background:url(../images/visiteurs/b1_nv.jpg);
margin-top:-3px;
}
#menu2 li:nth-child(2){
background:url(../images/visiteurs/b2_nv.jpg);
}
#menu2 li:nth-child(3){
background:url(../images/visiteurs/b3_nv.jpg);
}
#menu2 li:nth-child(4){
background:url(../images/visiteurs/b4_nv.jpg);
}
#menu2 li:nth-child(5){
background:url(../images/visiteurs/b5_nv.jpg);
}
#menu2 li:last-child{
background:url(../images/visiteurs/b6_nv.jpg);
}
 
 /*background des liens menus et sous menus au survol */
#menu2 li:first-child:hover, #menu2 li:first-child li:hover{
background:url(../images/visiteurs/b1a_nv.jpg);
}
#menu2 li:nth-child(2) li{
background:url(../images/visiteurs/b21_nv.jpg);
}
#menu2 li:nth-child(2) li:hover{
background:url(../images/visiteurs/b21a_nv.jpg); 
}
#menu2 li:nth-child(3) li{
background:url(../images/visiteurs/b31_nv.jpg); font-stretch:semi-condensed; font-size:12px;
}
#menu2 li:nth-child(3) li:hover{
background:url(../images/visiteurs/b31a_nv.jpg); font-stretch:semi-condensed; font-size:12px;
}
#menu2 li:nth-child(4):hover{
background:url(../images/visiteurs/b4a_nv.jpg);
}
#menu2 li:nth-child(5):hover{
background:url(../images/visiteurs/b5a_nv.jpg);
}
#menu2 li:last-child:hover, #menu2 li:last-child li:hover{
background:url(../images/visiteurs/b6a_nv.jpg);
}

En fait, dans mon sous-menu 2.1, 2.2 et 2.3, il s'affiche la même image (b21_nv.jpg) et b21a_nv.jpg (au survol) car je ne sais pas quoi mettre comme code pour le 2.2 et 2.3.

J'espère que vous m'avez compris, car je sais pas trop si c'est bien clair.

Merci pour votre aide

**solorac** · 04/10/2017, 16h10

Je viens de trouver une de mes erreurs :

Celle qui ne me permettait pas d'afficher le survol de mon menu 2 et 3.

Voici le css modifié :

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
/* Principal */
#menu2, #menu2 ul{
padding:0;
margin-top:3px;
list-style:none;
text-align:center;
font-weight:bold;
}
 
#menu2 li{
display:inline-block;
position:relative;
width:143px;
height:39px;
line-height:39px;
}
 
#menu2 ul li{
display:inherit;
}
 
#menu2 ul{
position:absolute;
max-height:0px;
overflow:hidden;
transition: 1.6s;
}
 
#menu2 li:hover ul{
max-height:156px;
}
 
/* background des liens menus */
#menu2 li:first-child{
background:url(../images/visiteurs/b1_nv.jpg);
margin-top:-3px;
}
#menu2 li:nth-child(2){
background:url(../images/visiteurs/b2_nv.jpg);
}
#menu2 li:nth-child(3){
background:url(../images/visiteurs/b3_nv.jpg);
}
#menu2 li:nth-child(4){
background:url(../images/visiteurs/b4_nv.jpg);
}
#menu2 li:nth-child(5){
background:url(../images/visiteurs/b5_nv.jpg);
}
#menu2 li:last-child{
background:url(../images/visiteurs/b6_nv.jpg);
}
 
 /*background des liens menus et sous menus au survol */
#menu2 li:first-child:hover, #menu2 li:first-child li:hover{
background:url(../images/visiteurs/b1a_nv.jpg);
}
#menu2 li:nth-child(2):hover{
background:url(../images/visiteurs/b2a_nv.jpg);
}
#menu2 li:nth-child(2) li{
background:url(../images/visiteurs/b21_nv.jpg);
}
#menu2 li:nth-child(2) li:hover{
background:url(../images/visiteurs/b21a_nv.jpg); 
}
#menu2 li:nth-child(3):hover{
background:url(../images/visiteurs/b3a_nv.jpg);
}
#menu2 li:nth-child(3) li{
background:url(../images/visiteurs/b31_nv.jpg); font-stretch:semi-condensed; font-size:12px;
}
#menu2 li:nth-child(3) li:hover{
background:url(../images/visiteurs/b31a_nv.jpg); font-stretch:semi-condensed; font-size:12px;
}
#menu2 li:nth-child(4):hover{
background:url(../images/visiteurs/b4a_nv.jpg);
}
#menu2 li:nth-child(5):hover{
background:url(../images/visiteurs/b5a_nv.jpg);
}
#menu2 li:last-child:hover, #menu2 li:last-child li:hover{
background:url(../images/visiteurs/b6a_nv.jpg);
}

Je continue de chercher...

**VirgApps** · 05/10/2017, 12h54

Salut,

Si les sélecteurs nth-child, first-child, etc... ont bien leur utilité, dans ton cas ton menu est statique et connu à l'avance donc si je peux me permettre, tu t'embêtes inutilement.

Dans le cas présent, pour attaquer tes deuxième et troisième sous-item, il faudrait le sélectionner par

Code :

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

1
2
3
 
ul#menu2 li:nth-child(2) li:nth-child(2) { ... }
ul#menu2 li:nth-child(2) li:nth-child(3) { ... }

Ce serait peut être plus simple de nommer clairement les ul et li par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<ul>
  <li id="item1">...</li>
  <li id="item2">
    <ul id="menu2">
      <li id="item2-1">...</li>
      <li id="item2-2">...</li>
      <li id="item2-3">...</li>
    </ul>
  </li>
</ul>

Et ainsi de les attaquer par

Code :

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

1
2
3
 
ul#menu2 li#item2-2 { ... }
ul#menu2 li#item2-3 { ... }

**solorac** · 05/10/2017, 17h17

Merci pour ton aide.

Pourrais-tu me mettre un exemple sur l'intégralité d'un sous-menu car je n'arrive à rien.
Attention, je ne veux pas la solution complète.

Et est-ce possible de ne pas changer mes noms d'id ?

Encore merci

Invité · 05/10/2017, 23h59

Envoyé par solorac

...Pourrais-tu me mettre un exemple sur l'intégralité d'un sous-menu...
Attention, je ne veux pas la solution complète....

Trop fort........

**VirgApps** · 16/10/2017, 16h22

Pour faire simple, tu attaques tes éléments ainsi :

Code :

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

ul#menu2 li:nth-child(n) li:nth-child(m)

où n correspond à ton n-ième item et m ton m-ième sous-item.

Exemple pour le 2ème sous-item de ton 3ème item :

Code :

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

ul#menu2 li:nth-child(3) li:nth-child(2)

Image de sous-menu déroulant

CSS

Vue hybride

Discussions similaires

Partager

Partager