Demande d'aide pour sous menu CSS3

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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 )

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

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

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:

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

27/08/2016, 20h44
Kraster

1 pièce(s) jointe(s)

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)

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:

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:

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

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:

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:

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 :google: : "méga-menu".

28/08/2016, 18h48
Kraster

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.