Demande d'aide pour sous menu CSS3

**Kraster** · 27/08/2016, 19h08

Bonjour,

Je cherche comment faire pour créer un menu semblable à celui-ci (voir image).
Le menu contient des sous menus sous forme de tableaux qui sortent et se cachent avec un effet de transition lors de son survol.
Pour mieux comprendre l'effect visitez ce lien: http://www.videdressing.com.

voici le code que j'ai écris:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- HTML -->
<nav class="nav">
	<ul>
		<li class="point"><a href="#"><strong>ALPHA</strong></a></li>
		<li class="point"><a href="#">BRAVO</a></li>
		<li class="point"><a href="#">DELTA</a></li>
		<li class="point"><a href="#">ECHO</a></li>
		<li class="point"><a href="#">FOXTROT</a></li>
		<li class="point"><a href="#">GOLF</a></li>
		<li class="point"><a href="#">HOTEL</a></li>
		<li class="point"><a href="#">JULIETTE</a></li>
	</ul>
</nav>

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
/* fichier CSS */
nav ul li {
    display: inline;
	padding:10px 5px 10px 10px;
}
nav ul li.point{
    background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAAA1BMVEUAAACnej3aAAAACklEQVQI12MAAgAABAABINItbwAAAABJRU5ErkJggg==") left center no-repeat;
}
 
nav {height:38px;background-color:white;overflow:hidden;border-bottom: 1px #cccccc solid;line-height:38px;}
nav ul {text-align:center;width:100%;}
nav ul li a {width:auto;padding:10px 10px 10px 10px; font-size:14px;}
 
nav a:link { color:#333333; }
nav a:visited { color:#333333; }
nav a:active { color:#333333; }
nav a:hover { color:#333333;background-color:#333333;color:white;}
nav a:focus { color:#333333; }

et puisque je suis débutant je n'arrive pas à faire le reste.
Je vous remercie par avance )

**Toufik83** · 27/08/2016, 19h57

les sous-menus doivent être crées au préalable

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
 
<nav class="nav">
<ul>
<li class="point"><a href="#"><strong>ALPHA</strong></a></li>
<li class="point"><a href="#">BRAVO</a></li>
<li class="point"><a href="#">DELTA</a></li>
<li class="point"><a href="#">ECHO</a></li>
<li class="point"><a href="#">FOXTROT</a></li>
<li class="point"><a href="#">GOLF</a></li>
<li class="point"><a href="#">HOTEL</a></li>
<li class="point"><a href="#">JULIETTE</a></li>
</ul>
</nav>
<div class="alpha sousmenu">
<li>sous_menu1 alpha</li>
<li>sous_menu2 alpha</li>
<li>sous-menu3 alpha</li>
</div>
<div class="bravo sousmenu">
<li>sous_menu1 bravo</li>
<li>sous_menu2 bravo</li>
<li>sous-menu3 bravo</li>
</div>
<div class="delta sousmenu">
<li>sous_menu1 delta</li>
<li>sous_menu2 delta</li>
<li>sous-menu3 delta</li>
</div>
<div class="echo sousmenu">
<li>sous_menu1 echo</li>
<li>sous_menu2 echo</li>
<li>sous-menu3 echo</li>
</div>
<div class="foxtrot sousmenu">
<li>sous_menu1 foxtrot</li>
<li>sous_menu2 foxtrot</li>
<li>sous-menu3 foxtrot</li>
</div>
<div class="golf sousmenu">
<li>sous_menu1 golf</li>
<li>sous_menu2 golf</li>
<li>sous-menu3 golf</li>
</div>
<div class="hotel sousmenu">
<li>sous_menu1 hotel</li>
<li>sous_menu2 hotel</li>
<li>sous-menu3 hotel</li>
</div>
<div class="juliette sousmenu">
<li>sous_menu1 juliette</li>
<li>sous_menu2 juliette</li>
<li>sous-menu3 juliette</li>
</div>

Css3 :

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
 
nav ul li {
display: inline;
padding:10px 5px 10px 10px;
}
nav ul li.point{
background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAAA1BMVEUAAACnej3aAAAACklEQVQI12MAAgAABAABINItbwAAAABJRU5ErkJggg==") left center no-repeat;
}
 
nav {height:48px;background-color:white;overflow:hidden;border-bottom: 1px #cccccc solid;line-height:38px;}
nav ul {text-align:center;width:100%;}
nav ul li a {width:auto;padding:10px 10px 10px 10px; font-size:14px;}
nav a:link { color:#333333; }
nav a:visited { color:#333333; }
nav a:active { color:#333333; }
nav a:hover { color:#333333;background-color:#333333;color:white;}
nav a:focus { color:#333333; }
.sousmenu{display:none;background-color:white;
color:#333333;border-top:4px solid black;border-bottom:4px solid black;}

et finalement du jQuery

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
 
$(function(){
var index;
	$(".point")
  .mouseenter(function(){
  	index=$(this).index();/* attention l'ordre des div class='sousmenu' doit être respecté. */ 
    $(".sousmenu").hide()
    .eq(index)
    .fadeIn(500);
  })
  .mouseleave(function(){
  	$("."+text)
    .fadeOut(500);
  });
});

**Kraster** · 27/08/2016, 20h44

Toufik, je vous remercie vivement pour votre réponse et infiniment de votre aide, tout semble en ordre mais pour une raison qui m'échappe ça marche pas ! merci de bien vouloir verifier corriger le fichier ci-joint (new.html)

**Toufik83** · 28/08/2016, 02h47

tu as une erreur dans la console non? pour que cela fonctionne
1- il faut ajouter jQuery dans le head et juste avant <script>...</script>.
c'est a dire :

Code html :

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

1
2
3
4
 
<head><script type="text/javascript"   src="https://code.jquery.com/jquery-2.2.4.js" ></script>
<script>$(function(){...});</script>
</head>

2-enlève le nav{ margin:150px } et remplace le par nav{margin:10px 0 2px 0;}
3-le premier li ne possède pas de class "point", il faut l'ajouter <li class='point'>...</li>.
puis tu modifie un peu la fonction jQuery, on va utiliser juste .mouseenter(), on enlève .mouseleave() :

Code jQuery :

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

1
2
3
4
5
6
7
8
9
10
11
 
$(function(){
var index;
	$(".point")
  .mouseenter(function(){
  	index=$(this).index();/* attention l'ordre des div class='sousmenu' doit être respecté. */ 
    $(".sousmenu").hide()
    .eq(index)
    .fadeIn(500);
  });
});

Invité · 28/08/2016, 09h19

Bonjour,

il faut réorganiser le code HTML, pour mettre les <div> (sous-menu) DANS les <li> du menu.
On enleve les classes inutiles,... et on rajoute les <ul></ul> manquants.

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<nav id="menuMain">
<ul>
	<li>
		<a href="#">ALPHA</a>
		<div>
			<ul>
				<li>sous_menu1 alpha</li>
				<li>sous_menu2 alpha</li>
				<li>sous-menu3 alpha</li>
			</ul>
		</div>
	</li>
	<li>
		<a href="#">BRAVO</a>
		<div>
			<ul>
				<li>sous_menu1 bravo</li>
				<li>sous_menu2 bravo</li>
				<li>sous-menu3 bravo</li>
			</ul>
		</div>
	</li>
	<li>
		<a href="#">DELTA</a>
		<div>
			<ul>
				<li>sous_menu1 delta</li>
				<li>sous_menu2 delta</li>
				<li>sous-menu3 delta</li>
			</ul>
		</div>
	</li>
	<li>
		<a href="#">ECHO</a>
		<div>
			<ul>
				<li>sous_menu1 echo</li>
				<li>sous_menu2 echo</li>
				<li>sous-menu3 echo</li>
			</ul>
		</div>
	</li>
	<li>
		<a href="#">FOXTROT</a>
		<div>
			<ul>
				<li>sous_menu1 foxtrot</li>
				<li>sous_menu2 foxtrot</li>
				<li>sous-menu3 foxtrot</li>
			</ul>
		</div>
	</li>
	<li>
		<a href="#">GOLF</a>
		<div>
			<ul>
				<li>sous_menu1 golf</li>
				<li>sous_menu2 golf</li>
				<li>sous-menu3 golf</li>
			</ul>
		</div>
	</li>
	<li>
		<a href="#">HOTEL</a>
		<div>
			<ul>
				<li>sous_menu1 hotel</li>
				<li>sous_menu2 hotel</li>
				<li>sous-menu3 hotel</li>
			</ul>
		</div>
	</li>
	<li>
		<a href="#">JULIETTE</a>
		<div>
			<ul>
				<li>sous_menu1 juliette</li>
				<li>sous_menu2 juliette</li>
				<li>sous-menu3 juliette</li>
			</ul>
		</div>
	</li>
</ul>
</nav>

Ensuite, ça fonctionne comme un menu horizontal "classique".

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
 
/* menu */
#menuMain > ul { 
  position:relative; /* important */
}
#menuMain > ul > li { 
  display:inline-block;  /* menu horizontal */
}
/* ... */
/* ... */
/* sous-menu */
#menuMain > ul > li > div { 
  position:absolute; 
  width:100%; top:100%; left:0;
  display:none;  /* on masque */
}
#menuMain > ul > li:hover > div { 
  display:block;  /* on affiche */
}
/* ... */
/* ... */

Par contre, afficher un sous-menu au survol (avec :hover) n'est pas pratique sur tablette TACTILE ou smartphone.
Il faut privilégier "au clic".

Fais une recherche

: "méga-menu".

**Kraster** · 28/08/2016, 18h48

Bonjour,
Toufik, Jreaux je vous remercie tous les deux.
En effet Jreaux ça marche comme menu horizontal "classique", mais je crois qu'il y a un effet de transition.
Bon, j'ai trouvé un mega menu qui ressemble un peu à ce que je cherche, le voilà: http://www.jqueryscript.net/demo/Min...-booNavigation
je vais essayer de changer les styles.

Demande d'aide pour sous menu CSS3 [CSS 3]

CSS

Discussions similaires

Partager

Partager