Re-bonjour,
j'ai un second soucis...
j'ai un menu en javascript sur mon site.
Le problème que j'ai c'est que lorsque je clic sur un menu le sous menu apparait.
Mais lorsque je clic sur le second menu, le sous menu du premier menu ne se ferme pas... il faut que je clic sur le sous menu 2 pour que le menu1 se ferme...
je sais pas si je suis assez clair....
voici mon code :
javascript :
et mon code html :
j'espère que quelqu'un pourra m'aider.... je n'y connais rien en JAVASCRIPT... et je galère depuis 3 jours sur ce problème !!
merci de votre aide !!!
j'ai un second soucis...
j'ai un menu en javascript sur mon site.
Le problème que j'ai c'est que lorsque je clic sur un menu le sous menu apparait.
Mais lorsque je clic sur le second menu, le sous menu du premier menu ne se ferme pas... il faut que je clic sur le sous menu 2 pour que le menu1 se ferme...
je sais pas si je suis assez clair....
voici mon code :
javascript :
<script type="text/javascript" src="../jquery-1.3.2.js"></script>
<script type="text/javascript">
<!--
$(document).ready( function () {
// On cache les sous-menus :
$(".menu ul.sousmenu").hide();
// sauf celui qui porte la classe "open_at_load" :
$(".menu ul.sousmenu:not('.sousmenu_open_at_load')").hide();
// On sélectionne tous les items de liste portant la classe "toggleSubMenu" et on remplace l'élément span qu'ils contiennent par un lien :
$(".menu li.toggleSousMenu 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'évènement "click" sur les liens dans les items de liste qui portent la classe "toggleSubMenu" :
$(".menu li.toggleSousMenu > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.sousmenu:visible").length != 0) {
$(this).next("ul.sousmenu").slideUp("normal",function () { $(this).parent().removeClass("open") });
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(".menu ul.sousmenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
$(this).next("ul.sousmenu").slideDown("normal", function () { $(this).parent().addClass("open") });
}
// On empêche le navigateur de suivre le lien : Il suffit maintenant de styler >li.open et >li.toggleSubMenu différemment grâce aux CSS.
return false;
});
} ) ;
// -->
</script>
<script type="text/javascript" src="../JAVASCRIPT/gallery.js"></script>
et mon code html :
<body>
<div id="global">
<div id="navigation"><img class="logo" src="../IMAGES/ZONE NAVIGATION/papierlogo.png" alt=""/>
<ul class="menu" >
<li class="toggleSousMenu"><a class="hover_print_open" title="Menu Print"><img src="../IMAGES/ZONE NAVIGATION/MENU/PRINT/onglet_print.png" alt="Menu Print"/></a>
<ul class="sousmenu_open_at_load">
<li><a class="hover_guidepds" title="Guide Placement de saison"><img src="../IMAGES/ZONE NAVIGATION/MENU/PRINT/SOUS MENU/ssmenu_print_guidepds.png" alt="Sous menu Guide placement de saison"/></a></li>
<li><a href="print_campagnehisseo.html" title="Campagne Hisséo"><img src="../IMAGES/ZONE NAVIGATION/MENU/PRINT/SOUS MENU/ssmenu_print_hisseo.png" alt="Sous menu Campagne Hisséo"/></a></li>
<li><a href="print_izeis.html" title="Campagne Izéis"><img src="../IMAGES/ZONE NAVIGATION/MENU/PRINT/SOUS MENU/ssmenu_print_izeis.png" alt="Sous menu Campagne Izéis"/></a></li>
<li><a href="print_coeur.html" title="Campagne Coeur de l'épargne"><img src="../IMAGES/ZONE NAVIGATION/MENU/PRINT/SOUS MENU/ssmenu_print_coeur.png" alt="Sous menu Campagne Coeur de l'épargne"/></a></li>
<li><a href="print_hopiclowns.html" title="Hopiclowns"><img src="../IMAGES/ZONE NAVIGATION/MENU/PRINT/SOUS MENU/ssmenu_print_hopiclowns.png" alt="Sous menu Hopiclowns"/></a></li>
<li><a href="print_latoupie.html" title="La toupie"><img src="../IMAGES/ZONE NAVIGATION/MENU/PRINT/SOUS MENU/ssmenu_print_latoupie.png" alt="Sous menu La Toupie"/></a></li>
<li><a href="print_jamsahel.html" title="Jam'sahel"><img src="../IMAGES/ZONE NAVIGATION/MENU/PRINT/SOUS MENU/ssmenu_print_jamsahel.png" alt="Sous menu Jam'Sahel"/></a></li>
<li><a href="print_discrimination.html" title="Discrimination à l'embauche"><img src="../IMAGES/ZONE NAVIGATION/MENU/PRINT/SOUS MENU/ssmenu_print_discrimination.png" alt="Sous menu Discrimination à l'embauche"/></a></li>
<li><a href="print_nonesuch.html" title="Nonesuch"><img src="../IMAGES/ZONE NAVIGATION/MENU/PRINT/SOUS MENU/ssmenu_print_nonesuch.png" alt="Sous menu Nonesuch"/></a></li>
<li><a href="print_olivier.html" title="A l'ombre de l'olivier"><img src="../IMAGES/ZONE NAVIGATION/MENU/PRINT/SOUS MENU/ssmenu_print_olivier.png" alt="Sous menu A l'ombre de l'olivier"/></a></li>
<li><a href="print_urbain.html" title="Urbain"><img src="../IMAGES/ZONE NAVIGATION/MENU/PRINT/SOUS MENU/ssmenu_print_urbain.png" alt="Sous menu Urbain"/></a></li>
</ul>
</li>
<li class="toggleSousMenu"><a class="hover_webdesign" href="#" title="Menu Webdesign"><img src="../IMAGES/ZONE NAVIGATION/MENU/WEBDESIGN/onglet_webdesign.png" alt="Menu Webdesign"/></a>
<ul class="sousmenu">
<li><a href="webdesign_banners.html" title="Banners"><img src="../IMAGES/ZONE NAVIGATION/MENU/WEBDESIGN/SOUS MENU/ssmenu_webdesign_banners.png" alt="Sous menu Banners"/></a></li>
</ul>
</li>
<li class="toggleSousMenu"><a class="hover_photographie" href="#" title="Menu Photographie"><img src="../IMAGES/ZONE NAVIGATION/MENU/PHOTOGRAPHIE/onglet_photographie.png" alt="Menu Photographie"/></a>
<ul class="sousmenu">
<li><a href="photographie_lieumemoire.html" title="Lieu de mémoire"><img src="../IMAGES/ZONE NAVIGATION/MENU/PHOTOGRAPHIE/SOUS MENU/ssmenu_photographie_lieudememoire.png" alt="Sous menu Lieu de mémoire"/></a></li>
<li><a href="photographie_lequotidien.html" title="Le quotidien"><img src="../IMAGES/ZONE NAVIGATION/MENU/PHOTOGRAPHIE/SOUS MENU/ssmenu_photographie_lequotidien.png" alt="Sous menu Le quotidien"/></a></li>
<li><a href="photographie_autoportrait.html" title="Autoportrait"><img src="../IMAGES/ZONE NAVIGATION/MENU/PHOTOGRAPHIE/SOUS MENU/ssmenu_photographie_autoportrait.png" alt="Sous menu Autoportrait"/></a></li>
</ul>
</li>
</ul>
</div>
<div id="contenu">
<div id="image_contenu">
<div id="galerie">
<ul id="galerie_mini">
<li><a href="../IMAGES/ZONE CONTENU/MENUPRINT/GUIDE_PDS/BIG/guide_pds_big_01.png"><img alt="Grand format guide placement de saison" src="../IMAGES/ZONE CONTENU/MENUPRINT/GUIDE_PDS/SMALL/guide_pds_small_01.png"/></a></li>
<li><a href="../IMAGES/ZONE CONTENU/MENUPRINT/GUIDE_PDS/BIG/guide_pds_big_02.png"><img alt="Grand format guide placement de saison 2" src="../IMAGES/ZONE CONTENU/MENUPRINT/GUIDE_PDS/SMALL/guide_pds_small_02.png"/></a></li>
<li><a href="../IMAGES/ZONE CONTENU/MENUPRINT/GUIDE_PDS/BIG/guide_pds_big_03.png"><img alt="Grand format guide placement de saison 3" src="../IMAGES/ZONE CONTENU/MENUPRINT/GUIDE_PDS/SMALL/guide_pds_small_03.png"/></a></li>
</ul>
</div>
</div>
<div id="source"><a href="contact.html"><img src="../IMAGES/ZONE CONTENU/footer.png" /></a></div>
</div>
<div id="mentionslegales">
<p align="right">Copyright © 2009 Com 1 Idée - <a class="mentions" href="mentions.html">Mentions légales</a></p>
</div>
</div>
</body>
j'espère que quelqu'un pourra m'aider.... je n'y connais rien en JAVASCRIPT... et je galère depuis 3 jours sur ce problème !!
merci de votre aide !!!