Comment réaliser un grand menu descendant en Jquery ?

**Dsphinx** · 25/01/2013, 14h23

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.

Dsphinx.

**SpaceFrog** · 25/01/2013, 14h36

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

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

http://jsfiddle.net/bPwne/1/

**camyo** · 25/01/2013, 15h40

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

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

**Dsphinx** · 29/01/2013, 08h10

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 :

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

**SpaceFrog** · 29/01/2013, 08h32

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

**Dsphinx** · 29/01/2013, 08h38

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 :

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

**SpaceFrog** · 29/01/2013, 08h42

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

Comment réaliser un grand menu descendant en Jquery ?

jQuery

Discussions similaires

Partager

Partager