Analyser ce menu

**laurentSc** · 31/07/2016, 14h34

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

Invité · 31/07/2016, 15h24

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 ccs :

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

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 ccs :

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

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 css :

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

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 css :

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

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).

**laurentSc** · 31/07/2016, 17h42

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 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
<!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" /> <!-- dans ce fichier css, j'ai mis ton code CSS -->
	<script type="text/javascript" src="menu.js"></script> <!-- dans ce fichier js, j'ai mis ton code js -->
 
</head>
<body>
 
		<!-- initialisation jQuery -->
<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>

**laurentSc** · 31/07/2016, 22h42

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

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

Analyser ce menu

CSS

Vue hybride

Discussions similaires

Partager

Partager