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 !