problème de menu en jquery
bonjour,
Voilà j'ai un soucis, j'ai créé une menu en html avec une gestion des sous menus en Jquery, jusque là ça va, par contre les liens direct à une page ne fonctionne plus. Sans Jquery ça fonctionne avec ça ne fonctionne plus.
Je vous mets les codes :
Le code HTML :
<nav>
<ul id="menu">
<li class="item-150"><a rel="150" rel="actualites" href="/actualites.html">Actualitées</a></li>
<li><a href="#" rel="100">Convocations</a></li>
<li><a href="#" rel="110">Le Club</a></li>
<li><a href="#" rel="120">Infos utiles</a></li>
<li class="item-160"><a rel="160" href="boutiqueEDA/index.php">Boutique</a></li>
<li><a href="#" rel="130">Liens</a></li>
</ul>
<div id="sub-100" class="sub-menu-items" style="display:none;">
<a class="close-sub-menu" href="#"></a>
<div class="sub-menu-container">
<a class="sub-elements" href="#" rel="domicile">Domicile</a>
<a class="sub-elements" href="#" rel="exterieur">Extérieur</a>
</div>
</div>
<div id="sub-110" class="sub-menu-items" style="display:none;">
<a class="close-sub-menu" href="#"></a>
<div class="sub-menu-container">
<a class="sub-elements" href="#">Réglement</a></li>
<a class="sub-elements" href="#">Organigramme</a></li>
<a class="sub-elements" href="#">Historique</a></li>
<a class="sub-elements" href="#">Arbitrage</a></li>
<a class="sub-elements" href="#">Partenaires</a>
</div>
</div>
<div id="sub-120" class="sub-menu-items" style="display:none;">
<a class="close-sub-menu" href="#"></a>
<div class="sub-menu-container">
<a class="sub-elements" href="#">Localisation des salles</a></li>
<a class="sub-elements" href="#">Horaires des entraînements</a></li>
<a class="sub-elements" href="#">Nos entraineurs</a></li>
</div>
</div>
<div id="sub-130" class="sub-menu-items" style="display:none;">
<a class="close-sub-menu" href="#"></a>
<div class="sub-menu-container">
<a class="sub-elements" href="#">FFHB</a></li>
<a class="sub-elements" href="#">LBHB</a></li>
<a class="sub-elements" href="#">COMITE-29</a></li>
</div>
</div>
</nav>Le code Jquery :
jQuery("#menu li a").click(function(){
jQuery(".sub-menu-items").slideUp();
jQuery("#sub-"+jQuery(this).attr("rel")).slideDown();
jQuery("#menu li a").removeClass("active");
jQuery(this).addClass("active");
return false;
});
jQuery("a.close-sub-menu").click(function(){
jQuery(".sub-menu-items").slideUp();
jQuery("#menu li a").removeClass("active");
return false;
});Je ne comprends pas pourquoi le liens actualité de me charge pas la page actualité.
merci
9 réponses
Je n'avais pas fait attention mais c'est normal que le lien ne se charge pas...
Ya un return false systématique à ton click sur les élements du menu...du coup ça coupe le lien
Bonjour,
je viens de tester ton code il fonctionne.
As-tu bien chargé jquery avant ce script?
Par précaution, attends que le document soit chargé avant de lancer ton script
=> $(document).ready(function(){
//Ton script
});
Cordialement
salut,
Oui oui il est charger ce n'est qu'une partie du code, normalement qu'en je click sur convocations le sous-menu s'affiche en slidedown, le soucis c que quand je click sur actualités la il n'y a pas de sous-menu il doit m'afficher ma page actualités.html dans la même page et la c pas le cas.
CDT
je met le code css avec :
*-------- MENU-HAUT ---------*/
#menu-H{position: absolute;margin-left: 845px;margin-top: -100px;width: 100px;}
#menu-H ul li a.pichome{float: left;background: url(images/pichome.png)no-repeat;width: 32px;height: 32px;margin-right: 20px;}
#menu-H ul li a.pichome:hover{background: url(images/pichome.png)no-repeat 0px -32px;}
#menu-H ul li a.pichome.selected{background: url(images/pichome.png)no-repeat 0px -32px;}
#menu-H ul li a.picmail{float:right;background: url(images/picmail.png)no-repeat;width: 34px;height: 26px;margin-top: 5px;}
#menu-H ul li a.picmail:hover{background: url(images/picmail.png)no-repeat 0px -26px;}
#menu-H ul li a.picmail.selected{background: url(images/picmail.png)no-repeat 0px -26px;}
/*-------- MENU ---------*/
#menu{height: 50px;background-color: none;}
#menu li{display: inline-block;margin-left: 20px;padding-left: 10px;}
#menu li a{text-decoration: none;font-family: 'zeroneroblack';font-size: 17px;color:#2887bd;line-height: 50px;padding: 14px 20px 14px 20px;}
#menu li a:hover{color: #fff;background: rgba(0,0,0,0.5);}
#menu li a.active{color: #fff;background: rgba(0,0,0,0.5);}
/*-------- SUB-MENU ---------*/
.sub-menu-items{width: 940px;background: rgba(0,0,0,0.5);padding: 10px;position: relative;}
.close-sub-menu{background: url(images/close.png)no-repeat;width: 20px;height: 20px;position: absolute;margin-left: 920px;cursor: pointer;}
.sub-menu-container{overflow: hidden;width: 600px;min-height: 100px;}
.sub-menu-container a{text-decoration: none;color: #fff;font-family: 'Myriad Pro',sans-sérif;font-size: 20px;border-bottom: 1px solid #fff;margin-left: 40px;}
.sub-elements{float: left;width: 250px;margin-top: 10px;padding: 5px;}
.sub-elements:hover{color: #fff;background: #2887bd;}pour le visuel...
en fait la structure du site :
index.html
actualites.html
contact.html
dossier : boutique
dossier : font
dossier : images
dossier : js
dossier : slider
style.css
nivo.css
fromulaire.css
la page actualités.html est au même niveau que l'index.html
oui je viens de voir que sans le js ça fonctionne!! du coup je supprime le return: false;?