Bonjour,
n'en déplaise à certains, je ne me sens pas capable de développer moi-même un menu ; donc j'en ai pris un qui me convient dans la galerie CSS et le modifie pour l'adapter à mon besoin (http://css.developpez.com/galerie/?p...orizontaux#MH1 ). Mais si, tout seul, il fonctionne bien, si je l'intègre dans mon appli, ce n'est plus le cas. Il est évident qu'il y a un effet de bord, mais la conception est trop complexe pour la présenter (et même pour faire un codepen). Aussi, je préfère mieux comprendre la conception du menu afin de détecter moi-même l'effet de bord et trouver la solution. Pour cela, je souhaite obtenir certains éclaircissements. Comme je pense que le souci vient du CSS, mes questions sont sur le CSS. En gros, il y a 3 propriétés sur lesquelles j'ai rajouté le commentaire /* pourquoi ? */
http://codepen.io/laurentsc/pen/KrBBvX
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
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr"> <head> <title>Menu horizontal déroulant</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="style.css" type="text/css" /> <link href="css/style-menu_images.css" rel="stylesheet"/> <script type="text/javascript" src="menu.js"></script> </head> <body><div id="centrer"> <div id="menu"> <ul> <li onmouseover="montre('smenu5',true);" onmouseout="montre('smenu5',false);">Menu 5 <ul id="smenu5"> <li onmouseover="montre('smenu51',true);" onmouseout="montre('smenu51',false);"><a href="#">smenu51</a> <ul id="smenu51"> <li><a href="#">smenu511</a></li> <li><a href="#">smenu512</a></li> <li><a href="#">smenu513</a></li> </ul> </li> <li onmouseover="montre('smenu52',true);" onmouseout="montre('smenu52',false);"><a href="#">smenu52</a> <ul id="smenu52"> <li><a href="#">smenu521</a></li> <li><a href="#">smenu522</a></li> <li><a href="#">smenu523</a></li> </ul> </li> <li onmouseover="montre('smenu53',true);" onmouseout="montre('smenu53',false);"><a href="#">smenu53</a> <ul id="smenu53"> <li><a href="#">smenu531</a></li> <li><a href="#">smenu532</a></li> <li><a href="#">smenu533</a></li> </ul> </li> </ul> </li> <li onmouseover="montre('smenu4',true);" onmouseout="montre('smenu4',false);"><a href="#">smenu4</a> <ul id="smenu4"> <li> <FORM action="#" method="POST"> <select name="stats" size=3> <option> option 1 </option> <option> option 2 </option> <option> option 3 </option> </select> <input type="submit" value="OK"> </FORM> </li> </ul> </li> <li class=" item_menu_border home position"><a class="height-medium" href="#" ><span class="centered">accueil</span></a></li> </ul> </div> </div> </body> </html>
Code css : 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 * { /* L'étoile sert à désigner tous les éléments d'une page en même temps */ margin:0px; padding:0px; background:#ffffff; text-align:center; } body{ font-family:Arial, Helvetica, sans-serif; } img { border:none; } a { color:#000000; text-decoration:none; text-transform:none; } /*centre la page et donne la largeur pour une basse résolution*/ #centrer { margin-left:auto; margin-right:auto; width:776px; } /****************************/ /* début menu déroulant */ /****************************/ ul, li { list-style-type:none; } /*chaque sous-menu*/ #menu ul li { position:relative;/* pourquoi ? */ float:right;/* pourquoi ? */ width:125px; cursor:pointer; /*display:block;*/ /*background:none;*/ height:92px; } /*carré déroulant sous un sous-menu niveau 1*/ #menu ul li ul { display:none; position:absolute;/* pourquoi ? */ width:125px; border:1px solid #dddddd; border-top:none; top:22px; left:0; } #menu ul li ul li { height:100%; } #menu ul li ul li a { color:#3399ff; font-size:11px; font-weight:normal; display:block; height:100%; border-top:1px solid #dddddd; } /*décalage des sous-menu niveau 2 vers la droite*/ #menu ul li ul li ul { top:0px; left:125px; }
Code js : 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 //au chargement de la page, on appelle la fonction montre() window.onload=montre; //affichage du menu déroulant et placement de ce dernier function montre(id,affiche) { var d = document.getElementById(id); //si on quitte un élément du menu if (d && !affiche) { d.style.display='none'; //on l'efface } //sinon si on se mets sur un élément du menu else if (d && affiche) { d.style.display='block'; //on l'affiche } }
Partager