Bonjour à tous,
Je voudrais réaliser un menu dynamique : il se compose en fait de'un menu <ul> avec des <li> possédant chacun un id propre et auquel un div correspond pour chacun.
Je pense en fait a donné au titre <h3> un id bien précis qui serait exactement le meme que la classe du div lui correspondant :
Exemple :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 <li id ="test">Menu 1</li> <div class="test">Contenu Menu 1</div>
J'ai d'abord voulu essayer via la fonction next(), afficher le div qui se trouve directement apres mon element <li> mais lors de l'affichage ca pose un probleme puisque les autres element du menu à savoir les <li> se placent en dessous du div affiché. J'ai donc pensé au principe des id et des classes, mais je ne trouve pas beaucoup d'infos
Voici mon code pour l'instant : (A notre que je suis dans un cms wordpress)
Si vous avez une autre solution n'hésitez pas
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 var $j = jQuery.noConflict(); $j(document).ready(function () { $j('div.slidemenu> li').click(function() { var id_conteneur = $j(this).attr("id"); var $nextDiv = $j("div.slidemenu").find('.'+id_conteneur'); var $visibleSiblings = $nextDiv.siblings('div:visible'); if ($visibleSiblings.length ) { $visibleSiblings.slideUp('500', function() { $nextDiv.slideToggle('500'); }); } else { $nextDiv.slideToggle('500'); } }); });
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 <div class="slidemenu"> <ul> <li style="cursor:pointer;" id="test">Accueil</li> <li style="cursor:pointer;" id="test2">Liège</li> <li style="cursor:pointer;" id="test3">Menu</li> </ul> <div class="test" style="height: 200px; border:1px solid #000; overflow:hidden; display:none; clear:both;"> test test test </div> <div class="test2" style="height: 200px; border:1px solid #000; overflow:hidden; display:none; clear:both;"> test2 test2 test2 </div> <div class="test3" style="height: 200px; border:1px solid #000; overflow:hidden; display:none; clear:both;"> test3 test3 test3 </div> </div>
Un grand merci !
Partager