Analyser ce menu

Version imprimable

Analyser ce menu

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:

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:

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:

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
 
	}
}

31/07/2016, 15h24
Invité
Bonjour Laurent,

Je peux te proposer un autre menu, fonctionnel : http://codepen.io/jreaux62/pen/dPxKKQ
Il a pour avantages :
- d'être responsive,
- de s'ouvrir au clic (PAS :hover), ce qui est plus pratique sur tablette TACTILE ou smartphone.
- d'être facile à styler (couleurs,...)
Sinon, pour tes questions :

1/
Code:

1 2 3 #menu ul li { position:relative;/* pourquoi ? */ ...
Par que #menu ul li ul (son enfant) est en position:absolute; et il a besoin que son PARENT soit LUI-AUSSI positionné.

2/
Code:

1 2 3 #menu ul li ul { position:absolute;/* pourquoi ? */ ...
Donc : le ul (#menu ul li ul) est en position absolue par rapport à son parent (#menu ul li) qui est POSITIONNE.

3/
Code:

1 2 3 4 #menu ul li { ... float:right;/* pourquoi ? */ ...
Simplement pour que les li de ce niveau soient l'un à coté de l'autre (à l'horizontal, donc).
les menus se mettent de la droite vers la gauche

N.B. On peut aussi (voire généralement) mettre :
Code:

1 2 3 4 #menu ul li { ... float:left; ...
Mais (FAIS LE TEST !) les menus se mettent dans le sens inverse (de la gauche vers la droite).

Merci Jérôme pour ta réponse que j'ai vue y a longtemps mais pas eu le temps de répondre plus tôt...

Petit bémol : si le codepen fonctionne bien, si je copie le code directement sur le PC, ça fonctionne mal : tous les sous-menus sont affichés en permanence...

Comme y a de fortes chances que le problème se situe dans l'en-tête, le voici :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE> <html> <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" />  <script type="text/javascript" src="menu.js"></script>  </head> <body>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="navMain"> <ul> <li> ...etc </body> </html>

Je viens de trouver ! Il fallait placer la déclaration de jQuery avant le code js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE>
<html>
<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" />
			<!-- initialisation jQuery -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="menu.js"></script>
 
</head>
<body>
 
 
<nav id="navMain">
    <ul>
...etc