Comment réaliser un grand menu descendant en Jquery ?

Version imprimable

25/01/2013, 14h23
Dsphinx

Comment réaliser un grand menu descendant en Jquery ?

Hello à tous,

Comment réaliser un "menu" qui descend au click d'un élément et qui remonte lorsqu'on clique sur un autre élément ? Je pense que c'est un jeu de "Div"...

J'ai vu un exemple pas mal fait : http://ela-asso.com/ ! Je suppose que c'est en JQuery...

Merci de votre aide. :ccool:

Dsphinx.
25/01/2013, 14h36
SpaceFrog

comme ceci ?
http://jsfiddle.net/bPwne/

ou avec le slidedown qui se lance après le slideuP

http://jsfiddle.net/bPwne/1/
25/01/2013, 15h40
camyo

Tu peux aussi regarder ça : http://www.impressivewebs.com/demo-f...a-drop-downs/#

sources : http://www.impressivewebs.com/mega-menus-ajax-jquery/

Merci les amis ! C'est exactement ce que je cherche... J'ai aussi investigué et j'ai trouvé un code bien fait !

J'aimerais que lorsque je clique sur "Menu 1" ça ouvre le div "panel1" et que lorsque je clique sur "Menu 2" ça ferme le div "panel1" et ouvre le div "panel2"...

C'est tout con à conditionner cela mais en javascript, je planche un peu...

Merci...

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
<!DOCTYPE html>
<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
		</script>
		<script> 
 
		$(document).ready(function(){
		  $("#flip1").click(function(){
			$("#panel1").slideToggle("slow");
		  });
		});
 
		$(document).ready(function(){
		  $("#flip2").click(function(){
			$("#panel2").slideToggle("slow");
		  });
		});
 
		</script>
 
		<style type="text/css"> 
		#panel1,#flip1
		{
		padding:5px;
		text-align:center;
		background-color:#e5eecc;
		border:solid 1px #c3c3c3;
		}
		#panel1
		{
		padding:50px;
		display:none;
		}
 
 
		#panel2,#flip2
		{
		padding:5px;
		text-align:center;
		background-color:#e5eecc;
		border:solid 1px #c3c3c3;
		}
		#panel2
		{
		padding:50px;
		display:none;
		}
		</style>
	</head>
	<body>
 
		<div id="flip1">Menu 1</div>
		<div id="flip2">Menu 2</div>
 
		<div id="panel1">sadfasdf sadf asd fasdf asdf</div>
		<div id="panel2">sadfasdfasdf sdfs dfsadf s</div>
 
		<div id="autrestext">
			asdf asdf asdf sdaf asdf asdf asdf asdf asd fasdf asdf sdf asdf sd
		</div>
	</body>
</html>

29/01/2013, 08h32
SpaceFrog

une petite recherche ...
et hop: tiens lui a eu le même souci ...
http://www.developpez.net/forums/d12...celle-ouverte/

Merci de ton aide spacefrog... J'ai gratté un peu ce que tu m'as envoyé et j'ai codé quelque chose d'a peu près juste mais encore tout à fait... La logique n'est pas très logique...

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
		<script> 
 
		$(document).ready(function(){
		  $("#flip1").click(function(){
			$("#panel1").slideToggle("slow");
 
			if($("#panel2").is(":visble"))
			{
				$("#panel2").slideToggle("Hide");
			}
			else
			{
				$("#panel1").slideToggle("Show");
			}
 
		  });
		});
 
		$(document).ready(function(){
		  $("#flip2").click(function(){
			$("#panel2").slideToggle("slow");
 
			if($("#panel1").is(":visible"))
			{
				$("#panel1").slideToggle("Hide");
			}
			else
			{
				$("#panel2").slideToggle("Show");
			}
 
		  });
		});
 
 
		</script>

29/01/2013, 08h42
SpaceFrog

ben c'est surtout que slideToggle() accepte deux paramètres...

le premier "duration" donc la durée du slide....
le second le callback

en l'occurrent je ne pense pas que "show" soit une durée ...

pour etre plus complet éventuellement un troisième paramètre (entre les deux le easing qui représente le type de déroulement de l'animation en swing pas defaut

Masi en aucun cas "hide" et "show" ne sont des paramètres reconnus par slideToggle()