Menu SlideUp / SlideDown

Bonjour,

Je suis nouvelle sur ce forum et je sollicite votre aide pour un menu avec un effet SlideUp / SlideDown. Je ne suis pas experte en jquery, j'espère donc que vous allez pouvoir m'éclairer sur ce point.

Pour commencer voici mon menu principal et ses sous menus (html)

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
            <nav id="menu">
            <ul class="menu">
            <li>
            <a target="_self" id="btn_1" class="ssmenu1-but" >MENU1</a>
            </li>
 
            <li>
            <a target="_self" id="btn_2" class="ssmenu2-but">MENU2</a>
            </li>
 
            <li>
            <a href="#">TEXTE</a>
            </li>
 
            <li>
            <a target="_self" id="btn_3" class="ssmenu3-but" >MENU3</a>
            </li> 
 
            <li>
            <a target="_self" id="btn_4" class="ssmenu4-but">MENU4</a>
            </li> 
 
            <li>
            <a href="#">TEXTE</a>
            </li>
            </ul>
            </nav>
 
 
<div class="sous_menu_global">      
      <div class="sous_menu ssmenu1" id="menu_1">
 
      <div class="txt_left">
      <h7>MENU 1</h7>
      </div>
 
      <div class="menu_col_1" >
      <ul class="menu">
      <li><a href="#">BLABLA</a></li>
      <li><a href="#">BLABLA</a></li>
      </ul>
      </div>
 
      <div class="menu_col_2" >
      <ul class="menu">
      <li><a href="#">BLABLA</a></li>
      <li><a href="#">BLABLA</a></li>
      </ul>
      </div>
 
      <div class="menu_col_3" >
      <ul class="menu">
      <li><a href="#">BLABLA</a></li>
      <li><a href="#">BLABLA</a></li>
      </ul>
      </div>
      </div>
 
      <div class="sous_menu ssmenu2" id="menu_2">
 
      <div class="txt_left">
      <h7>MENU 2</h7>
      </div>
 
      <div class="menu_col_2" >
      <ul class="menu">
      <li><a href="#">BLABLA</a></li>
      <li><a href="#">BLABLA</a></li>
      <li><a href="#">BLABLA</a></li>
      </ul>
      </div>
 
      <div class="menu_col_2" >
      <ul class="menu">
      <li><a href="#">BLABLA</a></li>
      <li><a href="#">BLABLA</a></li>
      <li><a href="#">BLABLA</a></li>
      </ul>
      </div>
 
      <div class="menu_col_2" >
      <ul class="menu">
      <li><a href="#">BLABLA</a></li>
     <li><a href="#">BLABLA</a></li>
      <li><a href="#">BLABLA</a></li>
      </ul> 
      </div>
 
      </div> 
 
      <div class="sous_menu ssmenu3" id="menu_3">
 
      <div class="txt_left">
      <h7>MENU 3</h7>
      </div>
 
      <div class="menu_col_1" >
      <ul class="menu">
      <li><a href="#">BLABLA</a></li>
      <li><a href="#">BLABLA</a></li>
      </ul>
      </div>
 
      <div class="menu_col_2" >
      <ul class="menu">
      <li><a href="#">BLABLA</a></li>
      <li><a href="#">BLABLA</a></li>
      </ul>
      </div>
 
      <div class="menu_col_3" >
      <ul class="menu">
      <li><a href="#">BLABLA</a></li>
      <li><a href="#">BLABLA</a></li>
      </ul> 
      </div>
 
      </div>
 
      <div class="sous_menu ssmenu4" id="menu_4" >
 
      <div class="txt_left">
      <h7>MENU 4</h7>
      </div>
 
      <div class="menu_col_1" >
      <ul class="menu">
      <li><a href="#">BLABLA</a></li>
      </ul>
      </div>
 
      <div class="menu_col_2" >
      <ul class="menu">
      <li><a href="#">BLABLA</a></li>
      </ul>
      </div>
 
      <div class="menu_col_3" >
      <ul class="menu">
      <li><a href="#">BLABLA</a></li>
      </ul> 
      </div>
 
      </div>
      </div>

Comme vous pouvez le voir j'ai ici, mon menu qui contient 6 liens dont deux directs et 4 vers un sous menu. J'aimerai que ces quatre sous menus s'affichent avec un effet slideUp/slideDown. N'étant pas très habile avec jquery j'ai trouvé un tuto qui fonctionne avec l'effet désiré, mais malheureusement il ne fonctionne pas sur l'ensemble des sous menus, je ne sais pas pour quelle raison le code ne fonctionne pas sur le dernier lien, voici le code ;

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
jQuery(document).ready(function($)
{ 
	$('.sous_menu').hide();
	$('.clear').height(0);
 
	$('#btn_1.ssmenu1-but').click(function ()
		{ 	
		var isVisible = $('.sous_menu').is(':visible');
		var isVisiblessmenu1 = $('.ssmenu1').is(':visible');
		var isVisiblessmenu2 = $('.ssmenu2').is(':visible');
		var isVisiblessmenu3 = $('.ssmenu3').is(':visible');
		var isVisiblessmenu4 = $('.ssmenu4').is(':visible');
		if(isVisible)
			{
			if(!isVisiblessmenu1)
				{
				if(isVisiblessmenu2)
					{
						$('.ssmenu2').slideUp("1000", function() { $('.ssmenu1').slideDown("1000") });
					}
 
 
 
				else if(isVisiblessmenu3)
					{
						$('.ssmenu3').slideUp("1000", function() { $('.ssmenu1').slideDown("1000") });	
					}
				}
				else
				{
				$('.ssmenu1').slideUp("1000");	
				}
			}
		else
			{
			$('.ssmenu1').slideDown();
			}
	});
 
 
 
 
 
	$('#btn_2.ssmenu2-but').click(function ()
		{ 	
		var isVisible = $('.sous_menu').is(':visible');
		var isVisiblessmenu1 = $('.ssmenu1').is(':visible');
		var isVisiblessmenu2 = $('.ssmenu2').is(':visible');
		var isVisiblessmenu3 = $('.ssmenu3').is(':visible');
		var isVisiblessmenu4 = $('.ssmenu4').is(':visible');
 
		if(isVisible)
			{
			if(!isVisiblessmenu2)
				{
				if(isVisiblessmenu1)
					{
						if(isVisiblessmenu3)
					       {
							   	if(isVisiblessmenu4)
					       {
							   }
 
						   }
 
					$('.ssmenu1').slideUp("1000", function() { $('.ssmenu2').slideDown("1000") });
					}
				else if(isVisiblessmenu3)
					{
					$('.ssmenu3').slideUp("1000", function() { $('.ssmenu2').slideDown("1000") });	
					}
				}
				else
				{
				$('.ssmenu2').slideUp("1000");	
				}
			}
		else
			{
			$('.ssmenu2').slideDown();
			}
	});
 
 
	$('#btn_3.ssmenu3-but').click(function ()
		{ 	
		var isVisible = $('.sous_menu').is(':visible');
		var isVisiblessmenu1 = $('.ssmenu1').is(':visible');
		var isVisiblessmenu2 = $('.ssmenu2').is(':visible');
		var isVisiblessmenu3 = $('.ssmenu3').is(':visible');
		var isVisiblessmenu4 = $('.ssmenu4').is(':visible');
 
		if(isVisible)
			{
			if(!isVisiblessmenu3)
				{
				if(isVisiblessmenu1)
					{ 
					$('.ssmenu1').slideUp("1000", function() { $('.ssmenu3').slideDown("1000") });
					}
				else if(isVisiblessmenu2)
					{
					$('.ssmenu2').slideUp("1000", function() { $('.ssmenu3').slideDown("1000") });	
					}
				}
				else
				{
				$('.ssmenu3').slideUp("1000");	
				}
			}
		else
			{
			$('.ssmenu3').slideDown();
			}
	});
 
 
 
 
 
	$('#btn_4.ssmenu4-but').click(function ()
		{ 	
		var isVisible = $('.sous_menu').is(':visible');
		var isVisiblessmenu1 = $('.ssmenu1').is(':visible');
		var isVisiblessmenu2 = $('.ssmenu2').is(':visible');
		var isVisiblessmenu3 = $('.ssmenu3').is(':visible');
		var isVisiblessmenu4 = $('.ssmenu4').is(':visible');
 
		if(isVisible)
			{
			if(!isVisiblessmenu4)
 
				{
				if(isVisiblessmenu1)
					{ 
					$('.ssmenu1').slideUp("1000", function() { $('.ssmenu4').slideDown("1000") });
					}
				else if(isVisiblessmenu2)
					{
					$('.ssmenu2').slideUp("1000", function() { $('.ssmenu4').slideDown("1000") });	
					}
				else if(isVisiblessmenu2)
					{
					$('.ssmenu3').slideUp("1000", function() { $('.ssmenu4').slideDown("1000") });	
					}
				}
 
				else
				{
				$('.ssmenu4').slideUp("1000");	
				}
			}
		else
			{
			$('.ssmenu4').slideDown();
 
			}
	});
 
});

Si vous avez une solution, je suis preneuse, par avance merci (soyez indulgent je débute :oops:)