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