Bonjour à tous,
J'ai suivi ce super tuto pour réaliser un menu déroulant avec JQuery : http://css.alsacreations.com/Tutoriels-JavaScript/Creer-un-menu-accordeon-avec-jQuery
Mais voici mon problème : dans ma page, sous la bannière se trouvent des images qui correspondent chacune à une entrée du menu.
Je souhaiterais déclencher l'ouverture du sous-menu correspondant à chaque image en passant la souris au-dessus de ces images.
Je pensais attribuer la même classe aux images et aux élements de la liste qui se correspondent, mais je ne sais pas comment intégrer une variable dans le nom de l'élément choisi, par exemple la classe de l'image survolée.
Voici mon fichier html :
Je vous ai épargné le css et les détails inutiles.
Je ne vois pas comment déclencher l'ouverture du sous menu correspondant à l'image sans passer par une variable de classe, or je n'ai jamais vu de variable dans le $(...) de JQuery...
En vous remerciant par avance !
Modifié par gabdu19 (25 May 2008 - 12:09)
J'ai suivi ce super tuto pour réaliser un menu déroulant avec JQuery : http://css.alsacreations.com/Tutoriels-JavaScript/Creer-un-menu-accordeon-avec-jQuery
Mais voici mon problème : dans ma page, sous la bannière se trouvent des images qui correspondent chacune à une entrée du menu.
Je souhaiterais déclencher l'ouverture du sous-menu correspondant à chaque image en passant la souris au-dessus de ces images.
Je pensais attribuer la même classe aux images et aux élements de la liste qui se correspondent, mais je ne sais pas comment intégrer une variable dans le nom de l'élément choisi, par exemple la classe de l'image survolée.
Voici mon fichier html :
<!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" lang="fr">
<head>
<title>Test Chancre Menu Accordéon</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.2.1.js"></script>
<script type="text/javascript">
<!--
$(document).ready( function () {
// On cache les sous-menus
// sauf celui qui porte la classe "open_at_load" :
$("ul.subMenu:not('.open_at_load')").hide();
// On selectionne tous les items de liste portant la classe "toggleSubMenu"
// et on remplace l'element span qu'ils contiennent par un lien :
$("li.toggleSubMenu span").each( function () {
// On stocke le contenu du span :
var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ;
} ) ;
// On modifie l'evenement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$("li.toggleSubMenu > a").click( function () {
// Si le sous-menu etait deja ouvert, on le referme :
if ($(this).next("ul.subMenu:visible").length != 0) {
$(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
}
// Si le sous-menu est cache, on ferme les autres et on l'affiche :
else {
$("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open_at_load") } );
} // fin de else
return false; // On empèche le navigateur de suivre le lien :
}); // fin de li.toggle
} ) ; //fin de document
// -->
</script>
</head>
<body>
<!-- banniere ici-->
<div id="ico">
<center>
<a href="bla"><img src="ico/1.png" onmouseover="this.src='ico/1on.png'" onmouseout="this.src='ico/1.png'" height="155" width="100" title="Accueil" border=0></a>
<a class="chancre1" href="bla"><img src="ico/2.png" onmouseover="this.src='ico/2on.png'" onmouseout="this.src='ico/2.png'" height="155" width="100" title="Le Chancre Mou" border=0></a>
<a class="chancre2" href="bla"><img src="ico/3.png" onmouseover="this.src='ico/3on.png'" onmouseout="this.src='ico/3.png'" height="155" width="100" title="Les Bureaux" border=0></a>
<a class="chancre3" href="bla"><img src="ico/4.png" onmouseover="this.src='ico/4on.png'" onmouseout="this.src='ico/4.png'" height="155" width="100" title="Les Evenements" border=0></a>
</center>
</div> <!-- fin ico -->
<div id="menu">
<ul id="navigation">
<li><a href="bla" title="">Accueil</a></li>
<li class="chancre1" class="toggleSubMenu"><span href="bla">Le Chancre Mou</span>
<ul class="subMenu">
<li><a href="bla">Présentation</a></li>
<li><a href="bla" >Histoire</a></li>
</ul>
</li>
<li iclass="chancre2" class="toggleSubMenu"><span>Bureaux</span>
<ul class="subMenu">
<li><a href="bla">2007-2008</a></li>
<li><a href="bla">2006-2007</a></li>
<li><a href="bla">2005-2006</a></li>
<li><a href="bla">2004-2005</a></li>
<li><a href="bla" >Avant</a></li>
</ul>
</li>
<li class="chancre3" class="toggleSubMenu"><span>Les Évènements</span>
<ul class="subMenu">
<li><a href="bla">Soirées</a></li>
<li><a href="bla">WEI</a></li>
</ul>
</ul>
</div> <!-- fin menu -->
</body>
</html>
Je vous ai épargné le css et les détails inutiles.
Je ne vois pas comment déclencher l'ouverture du sous menu correspondant à l'image sans passer par une variable de classe, or je n'ai jamais vu de variable dans le $(...) de JQuery...
En vous remerciant par avance !
Modifié par gabdu19 (25 May 2008 - 12:09)