Réécriture en jquery

Version imprimable

Bonjour à tous,
j'ai trouvé un bout de code en javascript sur internet et j'aimerais le réécrire en jquery car j'utilise cette bibliothèque sur mon site et j'aimerais un effet de slide lorsque le menu descend.
Le problème est que je ne maitrise absolument pas javascript ou jquery. Je n'utilise jquery que pour quelques effets éparses.
Pourriez vous m'aider en me donnant le code équivalent en jquery? :ccool:
Code:

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 onload = function() { var getEls = document.getElementById('menu').getElementsByTagName("LI"); var getListElts = document.getElementById('submenus').getElementsByTagName("UL"); var getAgn = getEls; for (var i=0; i<getEls.length; i++) { getEls[i].onclick=function() { this.className = this.className == 'clicked' ? '' : 'clicked'; for (var z=0; z<getAgn.length; z++) { if (this.id != getAgn[z].id){ getAgn[z].className = ''; } } ulId = this.id.replace("li", "ul"); document.getElementById(ulId).className = document.getElementById(ulId).className == 'yes' ? 'none' : 'yes'; for (var i=0; i<getListElts.length; i++) { if (ulId != getListElts[i].id && getListElts[i].className == "yes"){ getListElts[i].className = "none"; } } } } }
Merci beaucoup

salut,

ton code est très bizarre me semble t-il : il doit faire quoi exactement ?

je verrais bien un code du genre (mais ce n'est pas exactement ce que fait ta fonction):
Code:

1 2 3 4 5 6 7 8 9 10 $("#menu li").click(function(){ $("#menu li").each(function(){ $(this).removeClass("clicked"); $(this).find("#submenus ul").removeClass("yes"); }); $(this).addClass("clicked"); $(this).find("#submenus ul").addClass("yes"); }

15/03/2010, 15h46
fourmizen

Salut,
merci pour ta réponse.

Le code provient de ce site :
http://www.stunicholls.com/menu/pro_...ne_3.html#nogo

C'est un menu dropline. Je pense qu'avec jquery ca ne doit pas prendre beaucoup de lignes de code. En fait ce qui m'a bloqué pour l'écrire en jquery c'est de passer une variable en paramètres (le numéro de la li et de l'ul).

Ce serait possible de faire du onmousehover avec jquery pour ce code?

voila ça devrait marcher

Code:

1
2
3
4
5
6
7
8
9
10
11
12
	$("ul#menu > li").click(function(){ // gestion de l'evenement onclick sur les elements "ul#menu > li"
 
		$("ul#menu > li.clicked").removeClass("clicked"); // on supprime la classe "clicked" sur tous les elements "ul#menu > li.clicked"
		$("div#submenus > ul.yes").removeClass("yes"); // on supprime la classe "yes" sur tous les elements "ul#menu > li.yes"
 
		$(this).addClass("clicked"); // on ajoute la classe "clicked" sur l'element qui a été cliqué
 
                var id = $(this).attr("id"); // on recupere l'id de l'element cliqué
                id = id.replace("li", "ul"); // on remplace dans le nom de l'id "li" par "ul"
 
                $("div#submenus > ul#" + id).addClass("yes"); // on ajoute la classe "yes" à l'element "div#submenus > ul#ul_?"
	});

=> comme tu peux le voir c'est très simple d'utiliser jquery : tu devrais t'y mettre ;) ...

Le selecteur query $("???") est le même qu'on utilise en css

Pour le mousehover, je te conseille plutôt de le gérer directement en css sur l'élément <a> de ta liste

16/03/2010, 10h45
fourmizen

Merci! Super le code commenté :ccool:
Faudrait que je me mette à jquery mais là j'ai pas trop le temps...cet été :lol:

J'ai compris la fonction que tu as écrite par contre que me conseille tu pour faire apparaître les éléments :
- inclure les lignes de script permettant l'affichage dans cette fonction?
- créer une autre fonction qui gère l'affichage?
Quand je dis gérer l'affichage c'est juste un .slideToggle()

En tout cas merci encore!
++

je suis pas sur d'avoir tout compris a ta question : tu veux faire un slide sur tes elements #submenus, c'est ça ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
	$("ul#menu > li").click(function(){ // gestion de l'evenement onclick sur les elements "ul#menu > li"
 
		$("ul#menu > li.clicked").removeClass("clicked"); // on supprime la classe "clicked" sur tous les elements "ul#menu > li.clicked"
 
		$("div#submenus > ul.yes").each(function(){ // balayage de tous les elements (en l'occurence, il ne devrait y en avoir qu'un)
			$(this).removeClass("yes");
			$(this).slideUp(); // cache
		});
		// $("div#submenus > ul.yes").removeClass("yes").slideUp(); // peut-etre que ça marche => a tester...
 
		$(this).addClass("clicked"); // on ajoute la classe "clicked" sur l'element qui a été cliqué
 
                var id = $(this).attr("id"); // on recupere l'id de l'element cliqué
                id = id.replace("li", "ul"); // on remplace dans le nom de l'id "li" par "ul"
 
		$("div#submenus > ul#" + id).each(function(){ // balayage de tous les elements (en l'occurence, il ne devrait y en avoir qu'un)
			$(this).addClass("yes");
			$(this).slideDown(); // affiche
		});
		//$("div#submenus > ul#" + id).addClass("yes").slideDown(); // peut-etre que ça marche => a tester...
 
	});

oui c'est ca. mais je pense mettre un toogle à la place pour pouvoir aussi les remonter.
J'ai oublié de te filer le code html dsl:

Code:

1
2
3
<li class="sub" id="no1"><a href="#nogo"><img src="../data/images/e.png" alt="Accueil" width="25" height="30" border="0" /></a></li>
              <li class="sub" id="li_1"><a href="#nogo"><b>XXXXXXXXXX</b></a></li>
              <li class="sub" id="li_2"><a href="#nogo"><b>XXXXXXXXXX</b></a></li>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="submenus">
        <ul id="ul_1" class="none">
          <li><a href="#nogo21">XXXXXXXXXX</a></li>
          <li><a href="#nogo22">XXXXXXXXXX</a></li>
          <li><a href="#nogo23">XXXXXXXXXX</a></li>
        </ul>
        <ul id="ul_2" class="none">
          <li><a href="#nogo11">XXXXXXXXXX</a></li>
          <li><a href="#nogo12">XXXXXXXXXX</a></li>
          <li><a href="#nogo13">XXXXXXXXXX</a></li>
          <li><a href="#nogo14">XXXXXXXXXX</a></li>
        </ul>

Salut,
si tu veux bien m'aider encore un peu j'ai repris le code que tu m'avais filé et j'ai tout retravaillé mais ca fonctionne pas...aurais tu une idée?
Je t'explique ce que j'ai fait :
au chargement de la page le submenu est caché par css puis par jquery (.java_hidden). Ensuite normalement avec toogle et la récupération du contenu de l'id le menu s'abaisse mais ce n'est pas le cas...

CSS

Code:

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
 
.java_hidden {
	display : none;	
}
/*  --Menu portfolio--  */
#menu_folio {
	color: #DB1033;
	font-size: 125%;
	margin-top: 50px;
}
#menu_folio ul {
	display:table;
	margin:0 auto;
	padding:0;
	list-style-type:none;
	height:25px;
}
#menu_folio ul li {
	display:table-cell;
	width:auto;
	margin:0;		
}
#menu_folio ul li a {
	margin-right: 15px;
	margin-left: 15px;
	cursor: pointer;
}
#submenu_folio ul {
	display:table;
	margin:0 auto;
	padding:0;
	list-style-type:none;
}
#submenu_folio ul li {
	display:table-cell;
	width:auto;
	margin:0;
}
#submenu_folio ul li a {
	margin-right: 10px;
	margin-left: 10px;
	cursor: pointer;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
//--------------------------------------------
//	Menu
//--------------------------------------------
	$("#menu_folio > li").click(function(){ // gestion de l'evenement onclick sur les elements "ul#menu > li"
                var id = $(this).attr("id"); // on recupere l'id de l'element cliqué
                id = id.replace("li", "ul"); // on remplace dans le nom de l'id "li" par "ul"
 		$("#submenu_folio > ul #"+id).slideToggle("slow");
 	});
 
//--------------------------------------------
//	Cacher les éléments de navigation
//--------------------------------------------
		// suppression de la classe CSS servant à cacher les éléments au chargement de la page
    	$(".java_hidden").removeClass("java_hidden");
   	 	// Cache l'élement en javascript
   		$("#lang_choix").hide();		
		$("#submenu_folio > ul").hide();

HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<div id="menu_folio">
  <ul>
    <li><a id="li_1">Portfolio</a></li>
    <li><a href="...">Tirages</a></li>
    <li><a id="li_2">Commercial</a></li>
  </ul>
</div>
<div id="submenu_folio">
  <ul id="ul_1" class="java_hidden">
    <li><a href="#nogo21">Voyages</a></li>
    <li><a href="#nogo22">Arts-martiaux</a></li>
    <li><a href="#nogo23">Nature</a></li>
    <li><a href="#nogo23">Portraits</a></li>
  </ul>
  <ul id="ul_2" class="java_hidden">
    <li><a href="#nogo21">Lifestyle</a></li>
    <li><a href="#nogo22">Corporate</a></li>
    <li><a href="#nogo23">Mariage</a></li>
  </ul>
</div>

voici comment je ferais (attention, le css n'est compatible qu'avec les dernières versions de navigateurs) :

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<title>TEST</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
	<link rel="stylesheet" media="screen" type="text/css" title="montheme1" href="theme1.css" />
 
	<script type="text/javascript" src="jquery-1.4.2.js"></script>
	<script type="text/javascript" src="index.js"></script>
</head>
 
<body>
 
<ul id="menu_folio">
	<li><a href="#" title="Portfolio">Portfolio</a></li>
	<li><a href="#" title="Tirages">Tirages</a></li>
	<li><a href="#" title="Commercial">Commercial</a></li>
</ul>
 
<div id="submenu_folio">
	<ul id="Portfolio">
		<li><a href="#nogo21">Voyages</a></li>
		<li><a href="#nogo22">Arts-martiaux</a></li>
		<li><a href="#nogo23">Nature</a></li>
		<li><a href="#nogo23">Portraits</a></li>
	</ul>
 
	<ul id="Tirages">
		<li><a href="#nogo21">Lifestyle</a></li>
		<li><a href="#nogo22">Corporate</a></li>
		<li><a href="#nogo23">Mariage</a></li>
	</ul>
 
	<ul id="Commercial">
		<li><a href="#nogo21">Lifestyle</a></li>
		<li><a href="#nogo22">Corporate</a></li>
		<li><a href="#nogo23">Mariage</a></li>
	</ul>
</div>
 
 
</body>
</html>

Code:

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
 
/*  --Menu portfolio--  */
ul#menu_folio {
	margin:0 auto;
	list-style-type:none;
	text-align:center;
 
	background-color:red;
}
 
ul#menu_folio li {
	display : inline-block;
	margin: 5px;
}
 
 
/*  --SouS-Menu portfolio--  */
div#submenu_folio {
	height: 30px;
	background-color:yellow;
}
 
div#submenu_folio ul {
	display : none;
	text-align:center;
	list-style-type:none;
}
 
 
div#submenu_folio ul li {
	display : inline-block;
	margin:5px;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
$(document).ready(function(){	// Traitement à effectuer lorsque le DOM est prêt
 
	$("#menu_folio > li > a").click(function(e){ // gestion de l'evenement onclick sur les elements "ul#menu > li"
		e.preventDefault(); // annule la gestion de l'evenment click standard => evite que lorsqu'on clic sur le lien que ça bouge le centrage de la page web
 
		if(!$(this).hasClass("selected")){ // si <a> n'a pas la classe "selected"
 
			$("#menu_folio > li > a.selected").removeClass(); // supression de la classe
			$(this).addClass("selected"); // ajout de la classe
 
			$("#submenu_folio > ul").slideUp("slow"); // on masque les elements affichés
 
			var title = $(this).attr("title"); // on recupere l'attribut title de l'element cliqué
			//alert(title); // pour debug
			$("#submenu_folio > ul#" + title).slideDown(); // on affiche l'element selectionné
		}
 	});
 
	// initialisation
	$("#menu_folio > li:eq(0) > a").triggerHandler("click"); // lance l'evenement click sur le premier element de la list
 });

PS : attention a tes sélecteurs css => "#menu_folio > li" est différent de "#menu_folio li"

29/03/2010, 16h17
fourmizen

Merci pour l'aide...par contre ca fait un truc bizarre. quand je charge la page le premier sous menu est visible, quand je clique sur un autre item du menu le sous menu correspondant apparait en poussant par en bas le menu précédent et si je re-clique sur l'item du menu, le sous menu ne disparait pas...8O

rah c'est pourtant pas compliqué :rouleau: (tu avais tous les éléments en main)

Code:

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
$(document).ready(function(){	// Traitement à effectuer lorsque le DOM est prêt
 
	$("#menu_folio > li > a").click(function(e){ // gestion de l'evenement onclick sur les elements "ul#menu > li"
		e.preventDefault(); // annule la gestion de l'evenment click standard => evite que lorsqu'on clic sur le lien que ça bouge le centrage de la page web
 
		if(!$(this).hasClass("selected")){ // si <a> n'a pas la classe "selected"
 
			$("#menu_folio > li > a.selected").removeClass(); // supression de la classe
			$(this).addClass("selected"); // ajout de la classe
 
			$("#submenu_folio > ul").slideUp("slow"); // on masque les elements affichés
 
			var title = $(this).attr("title"); // on recupere l'attribut title de l'element cliqué
			//alert(title); // pour debug
			$("#submenu_folio > ul#" + title).slideDown(); // on affiche l'element selectionné
		} else { // le menu est deja affiché
			$(this).removeClass(); // supression de la classe
 
			var title = $(this).attr("title"); // on recupere l'attribut title de l'element cliqué
			//alert(title); // pour debug
			$("#submenu_folio > ul#" + title).slideUp(); // on cache l'element selectionné			
		}
 	});
 
	// initialisation
	$("#menu_folio > li:eq(0) > a").triggerHandler("click"); // lance l'evenement click sur le premier element de la list à l'ouverture de la page
 });

=> es-tu sur que c'est mieux de faire ça ? personnellement, je préfère l'autre comportement....

Par contre attention au css, les slides posent parfois des problèmes sur certains navigateurs => penses a tester ta page sur tous les navigateurs...

05/04/2010, 12h25
fourmizen

Merci ca fonctionne...juste eu quelques ajustements à faire...
Promis je me mets à Jquery sous peu!:ccool: