Discussion :

[remrem59]

Bonjour,

Débutant en JS et jQuery, j'ai un problème que je n'arrive pas à résoudre ...
C'est dans la gestion d'un menu.

le menu étant dans une liste et le sous menu dans une autre, les deux listes ne sont pas 'imbriquées' l'une dans l'autre et ne peut pas le faire étant donnée que le sous menu apparait plus loin ...

la 1ére partie du menu tiens dans une liste :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="menu">
	<ul>
		<li id="b_alpha">
			<a href="#">Page divers</a>
		</li>
		<li id="b_bravo">
			<a href="#">MENU GENERAL</a>
		</li>
		 ...
	</ul>
</div>

la deuxième partie, le sous menu apparait dans une liste déroulante horizontale dans un autre div :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="menu1">
		<ul>
			<li class="bravo">
				<h2>MENU GENERAL</h2>
				<a href="1.php"> page 1</a>
				<a href="2.php"> page 2</a>
				...
			</li>
			...
		</ul>
</div>

Une ou deux chose à préciser :
- le lien contenu dans .b_alpha renvoi directement sur une page (donc pas d'animation menu)
- quand le visiteur survole un lien de #menu ( on va prendre .bravo pour exemple) le #menu1 > .bravo glisse sur la gauche et h2 (et les <a>) devraient s'afficher ...

mon problème est que #menu1 > .bravo glisse bien, mais impossible d'agir sur le h2 et les <a>

je met mon code JS

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
<script type="text/javascript">
	$(document).ready(function(){
		$("#bouton li a").hover(function(){
			// on récupére l'ID du lien du 1er menu
			var index = $("#bouton li a").index(this);
 
			// on retire 1 étant donné que dans le 2em menu il n'y a pas de Alpha ... donc décalage
			var index2 = index - 1;
			//on récupére la largeur du div header (width 100%)
			var largeur = $("#header").width();
 
			// petit calcul pour que chaque #menu1 > ul > li glisse jusqu au bord gauche de la page
			var decal = -(largeur / 2) + 140 - (70 * index2);
 
			// On fait glisser le #menu1 > ul > li jusqu au bord gauche (pas de pb ça fonctionne)
			$("#menu1 ul li:eq(" + index2 + ")").animate({ 
				marginLeft: "" + decal +"px"
			}, 500 );
 
			// c est la que je bloque ... Il faut que je fasse apparaitre les <a> et le h2 ... mais je trouve pas le moyen de pointer dessus !
			$("#menu1 ul li:eq(" + index2 + ")").animate({ 
				opacity: 1,
				width: "360px",
				height: "160px",
				marginLeft: "" + decal +"px"
			}, 500 );
		});
	});
	</script>

Donc mon problème est bien là :

Code :

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

$("#menu1 ul li:eq(" + index2 + ")").animate(

Comment bien sélectionner #menu1 ul li h2 et #menu1 ul li p ?????

Merci par avance pour votre aide / piste / astuce / retouche ...

[ThomasR]

Bonjour,

Est-ce que ceci fonctionne ?

Code :

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

1
2
 
$("#menu1 > ul > li:eq(" + index2 + ") > h2").animate(

Sinon je n'ai pas très bien compris lorsque tu dis que le h2 et le p ne glissent pas, ils ne restent plus attachés à leur <li/> ?

Pourrais-t-on voir le CSS que tu leur a affecté, au cas ou ?

[remrem59]

Code :

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

$("#menu1 > ul > li:eq(" + index2 + ") > h2").animate(

Ne fonctionne pas ... :/

pour le CSS :

Code :

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

1
2
3
4
#menu1 ul li p,#menu1 ul li h2{
	width:0;
	height:0;
}

et avec jQuery je voudrais modifier en

Code :

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

1
2
3
opacity: 0.9,
width: "360px",
height: "160px"

jQuery tolère-t-il une animation dans une animation ? (J'ai essayé ceci sans succès...)

Code :

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

1
2
3
$("#menu1 > ul > li:eq(" + index2 + ") > h2").animate( ...
//remplacer par :
$("#menu1 > ul > li:eq(" + index2 + ") > h2").css( ...

Je reste persuader que c'est lié au fait que je ne parviens pas à sélectionner un h2 ou un <a>

[Bovino]

Code :

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

var index = $("#bouton li a").index(this);

C'est quoi index(this) ?

[remrem59]

le

Code :

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

var index = $("#bouton li a").index(this);

, me sert à récupérer la valeur de l' eq() dans le 1er menu
alpha = 0
bravo = 1
...

je soustrait 1 pour faire corroborer eq() du menu avec celui du menu1
comme ça hover sur menu > bravo (donc eq(1)) agis sur le menu1 eq(0)

C est sans doute pas la meilleure méthode ... mais ca fait 2 jour que je joue avec Js et 6 heures avec jQuery ... donc ca peut paraitre brouillon mais ça fonctionne ...

[Bovino]

Mais index() n'existe pas !