Menu slide en fonction d'un autre menu

**e-toon** · 22/10/2013, 00h53

Bonsoir bonsoir.

Je sais qu'ici on est pas du genre à mâcher le travail mais un coup de pouce ne serait pas de refus...

Je pars de ceci: http://e-toon.fr/jqueryUI.php

Et voici le code:

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
85
86
87
88
89
90
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slide demo</title>
  <style>
        html body{
        margin:0;
        padding:0;
        
        }
        .milieu nav{
        display: inline-block;
    width: 100%;
        height:45px;
    text-align: left;
        }
        #menu_horizontal ul
        {
                list-style-type: none;
        }
        #menu_horizontal li
        {
        display: inline-block;
        margin-right: 30px;
        font-family: Arial, serif;
        -webkit-transition: all ease-out 300ms;
        -moz-transition: all ease-out 300ms;
        -ms-transition: all ease-out 300ms;
        -o-transition: all ease-ou 300ms;
        transition: all ease-out 300ms;
        }
        #menu_horizontal li:hover {
        margin-right: 20px;
        }
        #menu_horizontal a
        {
    font-size: 1.3em;
    color: #181818;
    text-decoration: none;
        }
 
        #menu_horizontal a:hover
        {
    color: #760001;
    border-bottom: 3px solid #760001;
        }
        #fond_Présentation {
    width: 300px;
    height: 300px;
    background: #ccc;
        margin:30px 0px 0px 0px;
        padding-top:50px;
        }
  </style>
 
</head>
<body>
 
<p>Click anywhere to toggle the box.</p>
<nav id="menu_horizontal">
  <ul>
    <li class="Accueil"><a href="#">Accueil</a></li>
    <li class="Présentation"><a href="#">Présentation</a></li>
    <li class="Actualités"><a href="#">Actualités</a></li>
    <li class="Expos précédentes"><a href="#">Expos précédentes</a></li>
    <li class="Artistes"><a href="#">Artistes</a></li>
    <li class="Contacts"><a href="#">Contacts</a></li>
  </ul>
</nav>
<div id="fond_Présentation">
<nav id="menu_vertical_Présentation">
  <ul>
    <li class="L'Atelier"><a href="#">L'Atelier</a></li>
    <li class="Intervenants"><a href="#">Intervenants</a></li>
    <li class="Lieux"><a href="#">Lieux</a></li>
    <li class="Objectif et démarches"><a href="#">Objectif et démarches</a></li>
  </ul>
</nav>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(".Présentation").click(function() {
  $( "#menu_vertical_Présentation" ).effect("slide");
});
</script>
 
</body>
</html>

J'aimerai que le menu vertical change en fonction du menu horizontal avec un effet de slide comme avec le ".Présentation"

Merci beaucoup.

**NoSmoking** · 22/10/2013, 20h07

Bonjour,
je commencerais par essayer un truc du style

Code :

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

1
2
3
4
5
6
7
$(".Présentation").click(function() {
  $( "#menu_vertical_Présentation" ).effect("slide");
});
// j'ai juste rajouté ce qui suit
$(".Actualités").click(function() {
  $( "#menu_vertical_Actualités" ).effect("slide");
});

**e-toon** · 23/10/2013, 11h09

Merci NoSmoking c'est presque ça sauf que j'aimerais que le menu #menu_vertical_Actualités remplace le menu #menu_vertical_Présentation avec un effet de slide et des dislpay:none ou display:block j'ai donc pondu ce code qui ne marche pas pour le menu .Actualités:

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slide demo</title>
  <style>
        html body{
        margin:0;
        padding:0;
        
        }
        .milieu nav{
        display: inline-block;
    width: 100%;
        height:45px;
    text-align: left;
        }
        #menu_horizontal ul
        {
                list-style-type: none;
        }
        #menu_horizontal li
        {
        display: inline-block;
        margin-right: 30px;
        font-family: Arial, serif;
        -webkit-transition: all ease-out 300ms;
        -moz-transition: all ease-out 300ms;
        -ms-transition: all ease-out 300ms;
        -o-transition: all ease-ou 300ms;
        transition: all ease-out 300ms;
        }
        #menu_horizontal li:hover {
        margin-right: 20px;
        }
        #menu_horizontal a
        {
    font-size: 1.3em;
    color: #181818;
    text-decoration: none;
        }
 
        #menu_horizontal a:hover
        {
    color: #760001;
    border-bottom: 3px solid #760001;
        }
        #fond_Présentation {
    width: 300px;
    height: 300px;
    background: #ccc;
        margin:30px 0px 0px 0px;
        padding-top:50px;
        }
        #menu_vertical_Actualités{
        display:none;
        }
  </style>
 
</head>
<body>
 
<p>Click anywhere to toggle the box.</p>
<nav id="menu_horizontal">
  <ul>
    <li class="Accueil"><a href="#">Accueil</a></li>
    <li class="Présentation"><a href="#">Présentation</a></li>
    <li class="Actualités"><a href="#">Actualités</a></li>
    <li class="Expos précédentes"><a href="#">Expos précédentes</a></li>
    <li class="Artistes"><a href="#">Artistes</a></li>
    <li class="Contacts"><a href="#">Contacts</a></li>
  </ul>
</nav>
<div id="fond_Présentation">
<nav id="menu_vertical_Présentation">
  <ul>
    <li class="L'Atelier"><a href="#">L'Atelier</a></li>
    <li class="Intervenants"><a href="#">Intervenants</a></li>
    <li class="Lieux"><a href="#">Lieux</a></li>
    <li class="Objectif et démarches"><a href="#">Objectif et démarches</a></li>
  </ul>
</nav>
<nav id="menu_vertical_Actualités">
  <ul>
    <li class="L'Atelier"><a href="#">Expos en cours</a></li>
    <li class="Intervenants"><a href="#">Projects en cours</a></li>
  </ul>
</nav>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(".Présentation").click(function() {
        $( "#menu_vertical_Présentation" ).css('display','block').effect('slide');
        $( "#menu_vertical_Actualités" ).css('display','none');
});
$(".Actualités").click(function() {
        $( "#menu_vertical_Actualités" ).css('display','block').effect('slide');
        $( "#menu_vertical_Présentation" ).css('display','none');
});
</script>
 
</body>
</html>

Code :

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

1
2
3
4
5
6
7
8
9
10
<script>
$(".Présentation").click(function() {
	$( "#menu_vertical_Présentation" ).css('display','block').effect('slide');
	$( "#menu_vertical_Actualités" ).css('display','none');
});
$(".Actualités").click(function() {
	$( "#menu_vertical_Actualités" ).css('display','block').effect('slide');
	$( "#menu_vertical_Présentation" ).css('display','none');
});
</script>

Le résultat: http://www.e-toon.fr/jqueryUI.php

Au secours !

**NoSmoking** · 23/10/2013, 18h04

Voila le code que l'on peut récupérer du lien ue tu nous à mis

Code :

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

1
2
3
4
5
6
7
8
$(".Présentation").click(function() {
	$( "#menu_vertical_Présentation" ).css('display','block').effect('slide');
	$( "#menu_vertical_Actualités" ).css('display','none');
});
$(".Actualités").click(function() {
	$( "#menu_vertical_Présentation" ).css('display','none');
});
	$( "#menu_vertical_Actualités" ).css('display','block').effect('slide');

ce n'est pas exactement la même chose que ce que tu mets comme code dans ton post.

**e-toon** · 23/10/2013, 19h32

Merci beaucoup NoSmoking j'ai trouvé tout seul comme un grand voici le code:

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
85
86
87
88
89
90
91
92
93
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slide demo</title>
  <style>
        html body{
        margin:0;
        padding:0;
        
        }
        .milieu nav{
        display: inline-block;
    width: 100%;
        height:45px;
    text-align: left;
        }
        #menu_horizontal ul
        {
                list-style-type: none;
        }
        #menu_horizontal li
        {
        display: inline-block;
        margin-right: 30px;
        font-family: Arial, serif;
        -webkit-transition: all ease-out 300ms;
        -moz-transition: all ease-out 300ms;
        -ms-transition: all ease-out 300ms;
        -o-transition: all ease-ou 300ms;
        transition: all ease-out 300ms;
        }
        #menu_horizontal li:hover {
        margin-right: 20px;
        }
        #menu_horizontal a
        {
    font-size: 1.3em;
    color: #181818;
    text-decoration: none;
        }
 
        #menu_horizontal a:hover
        {
    color: #760001;
    border-bottom: 3px solid #760001;
        }
        #fond_Présentation {
    width: 300px;
    height: 300px;
    background: #ccc;
        margin:30px 0px 0px 0px;
        padding-top:50px;
        }
        #menu_vertical_Actualités{
        display:none;
        }
  </style>
 
</head>
<body>
 
<p>Click anywhere to toggle the box.</p>
<nav id="menu_horizontal">
  <ul>
    <li class="Accueil"><a href="#">Accueil</a></li>
    <li class="Présentation"><a href="#">Présentation</a></li>
    <li class="Actualités"><a href="#">Actualités</a></li>
    <li class="Expos précédentes"><a href="#">Expos précédentes</a></li>
    <li class="Artistes"><a href="#">Artistes</a></li>
    <li class="Contacts"><a href="#">Contacts</a></li>
  </ul>
</nav>
<div id="fond_Présentation">
<nav id="menu_vertical_Présentation">
  <ul>
    <li class="L'Atelier"><a href="#">L'Atelier</a></li>
    <li class="Intervenants"><a href="#">Intervenants</a></li>
    <li class="Lieux"><a href="#">Lieux</a></li>
    <li class="Objectif et démarches"><a href="#">Objectif et démarches</a></li>
  </ul>
</nav>
<nav id="menu_vertical_Actualités">
  <ul>
    <li class="L'Atelier"><a href="#">Expos en cours</a></li>
    <li class="Intervenants"><a href="#">Projects en cours</a></li>
  </ul>
</nav>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</body>
</html>

Code :

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

1
2
3
4
5
6
7
8
9
$(".Présentation").click(function() {
  $( "#menu_vertical_Présentation" ).css('display','block').effect('slide');
    $( "#menu_vertical_Actualités" ).css('display','none');
});
// j'ai juste rajouté ce qui suit
$(".Actualités").click(function() {
  $( "#menu_vertical_Actualités" ).css('display','block').effect('slide');
  $( "#menu_vertical_Présentation" ).css('display','none');
});

Merci encore.

**NoSmoking** · 23/10/2013, 21h11

Un petit conseil, évite de mettre des accents dans les valeurs de tes attributs ID et autre cela pourrait un jour te poser des problèmes.

Maintenant tu devrais être capable d'écrire la même chose en 4/5 lignes et ce quelque soit le nombre de menus à traiter

.

**e-toon** · 23/10/2013, 21h33

C'est bon NoSmoking j'ai trouvé merci pour ton aide précieuse voici le code final:

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
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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slide demo</title>
  <style>
	html body{
	margin:0;
	padding:0;
 
	}
	.milieu nav{
	display: inline-block;
    width: 100%;
	height:45px;
    text-align: left;
	}
	#menu_horizontal ul
	{
		list-style-type: none;
	}
	#menu_horizontal li
	{
	display: inline-block;
	margin-right: 30px;
	font-family: Arial, serif;
	-webkit-transition: all ease-out 300ms;
	-moz-transition: all ease-out 300ms;
	-ms-transition: all ease-out 300ms;
	-o-transition: all ease-ou 300ms;
	transition: all ease-out 300ms;
	}
	#menu_horizontal li:hover {
	margin-right: 20px;
	}
	#menu_horizontal a
	{
    font-size: 1.3em;
    color: #181818;
    text-decoration: none;
	}
 
	#menu_horizontal a:hover
	{
    color: #760001;
    border-bottom: 3px solid #760001;
	}
	#fond_Présentation {
    width: 300px;
    height: 300px;
    background: #ccc;
	margin:30px 0px 0px 0px;
	padding-top:50px;
	}
	#menu_vertical_Présentation, #menu_vertical_Actualités, #menu_vertical_Expos, #menu_vertical_Artistes, #menu_vertical_Contact {display:none}
  </style>
 
</head>
<body>
 
<nav id="menu_horizontal">
  <ul>
    <li class="Accueil"><a href="#">Accueil</a></li>
    <li class="Présentation"><a href="#">Présentation</a></li>
    <li class="Actualités"><a href="#">Actualités</a></li>
    <li class="Expos"><a href="#">Expos précédentes</a></li>
    <li class="Artistes"><a href="#">Artistes</a></li>
    <li class="Contact"><a href="#">Contact</a></li>
  </ul>
</nav>
<div id="fond_Présentation">
	 <nav id="menu_vertical_Accueil">
      <ul>
        <li class="pouet"><a href="#">pouet</a></li>
        <li class="coucou"><a href="#">coucou</a></li>
        <li class="salut"><a href="#">salut</a></li>
        <li class="héhé"><a href="#">héhé</a></li>
      </ul>
    </nav>
    <nav id="menu_vertical_Présentation">
      <ul>
        <li class="L'Atelier"><a href="#">L'Atelier</a></li>
        <li class="Intervenants"><a href="#">Intervenants</a></li>
        <li class="Lieux"><a href="#">Lieux</a></li>
        <li class="Objectif et démarches"><a href="#">Objectif et démarches</a></li>
      </ul>
    </nav>
    <nav id="menu_vertical_Actualités">
      <ul>
        <li class="L'Atelier"><a href="#">Expos en cours</a></li>
        <li class="Intervenants"><a href="#">Projects en cours</a></li>
      </ul>
    </nav>
    <nav id="menu_vertical_Expos">
      <ul>
        <li class="2013"><a href="#">2013</a></li>
        <li class="2012"><a href="#">2012</a></li>
        <li class="2011"><a href="#">2011</a></li>
        <li class="2010"><a href="#">2010</a></li>
        <li class="2009"><a href="#">2009</a></li>
        <li class="2008"><a href="#">2008</a></li>
      </ul>
    </nav>
    <nav id="menu_vertical_Artistes">
      <ul>
        <li class="David"><a href="#">David</a></li>
        <li class="Nathalie"><a href="#">Nathalie</a></li>
        <li class="Claire"><a href="#">Claire</a></li>
        <li class="Didier"><a href="#">Didier</a></li>
      </ul>
    </nav>
    <nav id="menu_vertical_Contact">
      <ul>
        <li class="Où nous trouver"><a href="#">Où nous trouver</a></li>
        <li class="Formulaire de contact"><a href="#">Formulaire de contact</a></li>
      </ul>
    </nav>
 
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(".Accueil").click(function() {
  $( "#menu_vertical_Accueil" ).css('display','block').effect('slide');
    $( "#menu_vertical_Présentation" ).css('display','none');
	$( "#menu_vertical_Acualités" ).css('display','none');
	$( "#menu_vertical_Expos" ).css('display','none');
	$( "#menu_vertical_Artistes" ).css('display','none');
	$( "#menu_vertical_Contact" ).css('display','none');
});
$(".Présentation").click(function() {
  $( "#menu_vertical_Présentation" ).css('display','block').effect('slide');
    $( "#menu_vertical_Accueil" ).css('display','none');
	$( "#menu_vertical_Actualités" ).css('display','none');
	$( "#menu_vertical_Expos" ).css('display','none');
	$( "#menu_vertical_Artistes" ).css('display','none');
	$( "#menu_vertical_Contact" ).css('display','none');
});
// j'ai juste rajouté ce qui suit
$(".Actualités").click(function() {
  $( "#menu_vertical_Actualités" ).css('display','block').effect('slide');
  $( "#menu_vertical_Accueil" ).css('display','none');
  $( "#menu_vertical_Présentation" ).css('display','none');
  $( "#menu_vertical_Expos" ).css('display','none');
  $( "#menu_vertical_Artistes" ).css('display','none');
  $( "#menu_vertical_Contact" ).css('display','none');
});
$(".Expos").click(function() {
  $( "#menu_vertical_Expos" ).css('display','block').effect('slide');
  $( "#menu_vertical_Accueil" ).css('display','none');
  $( "#menu_vertical_Présentation" ).css('display','none');
  $( "#menu_vertical_Actualités" ).css('display','none');
  $( "#menu_vertical_Artistes" ).css('display','none');
  $( "#menu_vertical_Contact" ).css('display','none');
});
$(".Artistes").click(function() {
  $( "#menu_vertical_Artistes" ).css('display','block').effect('slide');
  $( "#menu_vertical_Accueil" ).css('display','none');
  $( "#menu_vertical_Présentation" ).css('display','none');
  $( "#menu_vertical_Actualités" ).css('display','none');
  $( "#menu_vertical_Expos" ).css('display','none');
  $( "#menu_vertical_Contact" ).css('display','none');
});
$(".Contact").click(function() {
  $( "#menu_vertical_Contact" ).css('display','block').effect('slide');
  $( "#menu_vertical_Accueil" ).css('display','none');
  $( "#menu_vertical_Présentation" ).css('display','none');
  $( "#menu_vertical_Actualités" ).css('display','none');
  $( "#menu_vertical_Expos" ).css('display','none');
  $( "#menu_vertical_Artistes" ).css('display','none');
});
</script>
 
</body>
</html>

Et toujours le résultat: http://www.e-toon.fr/jqueryUI.php

**e-toon** · 23/10/2013, 21h39

OK je prends note par rapport aux accents dans les classes/id Merci pour ta précieuse aide à plus tard

Menu slide en fonction d'un autre menu

jQuery

Vue hybride

Discussions similaires

Partager

Partager