Bonjour,

Je travail actuellement sur un site web.
Le contenu de ce site est totalement dynamique. Il permet notamment la création d'un menu avec de catégories et rubriques (équivalent menu & sous-menu) récupéré dans la base de donnée.

Je souhaite mettre en forme ces menus avec la librairie mootools : http://demos.mootools.net/Mouseenter (Menu example).

Venons en au fait.
Pour utiliser cette librairie, il faut que chaque partie du menu possède un ID :
Dans l'exemple et de mon test en cours, le nom de cet ID est : "myOtherElement"+i (i correspondant au numéro de la catégorie).

Etant donné que chaque div "myOtherElement"+i possède un nombre de rubrique différent, la taille de la div doit donc varier en fonction.
Problème : avec la librairie de base on a une taille de div équivalente quel que soit la div en question.
J'ai donc essayé de créer une variable de taille en pixel basée sur le nombre de rubrique contenu dans la catégorie.
Mais a chaque fois la variable ne passe pas.

Trève de blablatage, le code sera plus parlant.

<?php

        //On récupère le nombre de Catégorie
        $nbrCat = mysql_result(mysql_query('SELECT COUNT(*) FROM site_categorie'), 0); 
	$nbrCat = $nbrCat-1;

	for( $i = 0; $i<=$nbrCat; $i++)
	{		
	$idCat = mysql_fetch_array(mysql_query('SELECT cat_id FROM site_categorie WHERE cat_ordre ="'.($i+1).'"')) or die (mysql_error());
		$nbrRub = mysql_result(mysql_query('SELECT COUNT(*) FROM site_rubrique WHERE rub_cat_id = "'.$idCat['cat_id'].'"'),0);
                
                //Je crée un tableau avec en clef, le numéro de la cat, en valeur son nombre de rubrique
		$listeNbrRub[$i] = $nbrRub; 
	}
	?>	
	<script language="javascript" type="text/javascript">
	
        //Petite bidouille pour transformer ma valeur récupérée en PHP en JS
	var nbrCat = <?php echo $nbrCat;?>;
        //On s'assure que la valeur soit bien un int
	nbrCat = parseInt(nbrCat);

        //Fonction permettant de transformer mon tableau PHP en tableau JS, dans mon cas il retourne le tableau qui suit	
	<?php echo php2js($listeNbrRub,'leNbrRub');?>	

        leNbrRub = new Array();
leNbrRub[0] = '3';
leNbrRub[1] = '1';
leNbrRub[2] = '1';
leNbrRub[3] = '0';
leNbrRub[4] = '0';

//On passe ici a la fonction de menu mootools

window.addEvent('domready', function()
{
	
	for(var j = 0; j<nbrCat+1; j++) //Pour chaque catégorie
	{			
	
		$('myOtherElement'+j).addEvents(  //Ici, "myOtherElement"+j = id de chaque div
                {			
		       'mouseenter': function()
                       {
                             //ici je crée la taille de la div. Dans cet exemple, si je met une valeur au tableau "leNbrRub", cela fonctionne mais la taille est alors la mm pour toutes les div. Ce que je voudrais c'est pouvoir remplacer le 1 de "leNbrRub[1]" par la valeur de "j", mais je n'y arrive pas.
		              var size = 20+leNbrRub[1]*20;		

		               // Always sets the duration of the tween to 1000 ms and a bouncing transition
		              // And then tweens the height of the element
		              this.set('tween',
                              {			
		                     duration: 1000,
		                     transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
		               }).tween('height', size+'px'); //Ici on inscrit la taille souhaitée
		       },
		       'mouseleave': function()
                       {
		       // Resets the tween and changes the element back to its original size
		       this.set('tween', {}).tween('height', '20px');
		       }
	        });	
	}
});	

<div id="myOtherElement1" style="width: 200px;	height: 20px; overflow: hidden;	border: 1px solid black; background-color: #f9f9f9; ">
	<a href="index.php?cat=2">categorie 2</a>
	<div>				
		<span style="display: block;padding: 0 3px;">
                           <a style="display: block;padding: 0 3px;" href="index.php?cat=2&rub=4">2-1 rubrique</a>
                </span>		
	</div>
</div>

Configuration: Windows XP
Firefox 3.0.3