18041 sujets

Questions générales et questions de débutants

[Résolu] Problème menu déroulant

Bonjour tous le monde Smiley cligne
J'ai un problème avec mon menu, mes lien de fonctionne absolument pas j'ai chercher mais mon niveau ne me suffit plus à trouver l'erreur dans mon code.

voici mon code html :

<nav id="menu">
			<ul>
    			<li>
				<a href="index.php">Accueil</a>
				</li>
        		<li><a href="">L'association</a>
                   <nav class="menu-open">
                    	<div class="content-wrap">
                    	<ul>
                        	<li>
                            	<a href="vie-asso.php" rel="external">
                                <img src="img/histoire.jpg">
                                <p>La vie de l'association</p>
                                </a>
                            </li>
							<li>
                            	<a href="photo-asso.php" rel="external">
                                <img src="img/musée.jpg">
                                <p>Galerie photos</p>
                                </a>
                            </li>
                        </ul>
                        </div>
                    </nav>
                </li>
       			<li><a href="#" rel="external">Le Château</a>
					<nav class="menu-open">
                    	<div class="content-wrap">
                    	<ul>
                        	<li>
                            	<a href="chateau-histoire.php" rel="external">
                                <img src="img/hotels.jpg">
                                <p>Histoire</p>
                                </a>
                            </li>
							<li>
                            	<a href="chateau-travaux.php" rel="external">
                                <img src="img/camping.jpg">
                                <p>Travaux</p>
                                </a>
                            </li>
							<li>
                            	<a href="chateau-photo.php" rel="external">
                                <img src="img/gîtes.jpg">
                                <p>Galerie photos</p>
                                </a>
                            </li>
                        </ul>
                        </div>
                    </nav>
                </li>					
        		<li>
				<a href="animation.php">Les animations</a>
				</li>
				<li>
				<a href="tarifs.php">Ouvertures et tarifs</a>
				</li>
        		<li><a href="#">Groupes</a>
					<nav class="menu-open">
                    	<div class="content-wrap">
                    	<ul>
                        	<li>
                            	<a href="groupe-scolaire.php" rel="external">
                                <img src="img/hotels.jpg">
                                <p>Scolaires</p>
                                </a>
                            </li>
							<li>
                            	<a href="groupe-entreprise.php" rel="external">
                                <img src="img/camping.jpg">
                                <p>Entreprises</p>
                                </a>
                            </li>
							<li>
                            	<a href="groupe-autre.php" rel="external">
                                <img src="img/gîtes.jpg">
                                <p>Familles, Amis, Autres</p>
                                </a>
                            </li>
                        </ul>
                        </div>
                    </nav>
				</li>
        		<li><a href="contact.php">Nous contacter</a>
				</li>
    		</ul>
		</nav>


Et voici mon css :

#menu {
	width: 104.9em;
	height: 3.8em;
	font-size: 0.8em;
	background-color: black;
	position: fixed;	
	font-weight: bold;
	border: 0.28em solid white;
}
#menu ul li a:hover nav{
	display:block;
}
}
#menu ul li:first-child{
	margin-left: 5em;
}
#menu ul li{
	float: left;
	text-transform: uppercase;
	margin-top: 1.5em;
	margin-left: 4em;
}
#menu a{
	text-decoration: none;
	color: red;
	font-weight: bold;
	font-family: papyrus;
}

#menu a:hover{
	color:#999;
}

.menu-open {
	background-color:#151515;
	width:100%;
	position:absolute;
	left:0;
	top:3.8em;
	z-index:100;
	border: 0.28em solid white;
	margin-left:-0.2em;
}
#menu .menu-open ul {
	padding-top:1em;
}
#menu .menu-open li {
	width:25%;
	margin-left:2.5%;
	background: #998A75;
	border: 2px solid #fff;
	margin-bottom:1em;
	font-size:0.99em;
	padding:0;
	text-align:justify;
}
#menu .menu-open ul li:first-child{
	margin-left:4em;
}
#menu .menu-open ul li{
	margin-right: 3%;
}
#menu .menu-open ul li a{
	color:black;
	font-size: 15px;
	width:1em;
	padding:1em;
}
#menu .menu-open ul li a:hover{
	color:red;
}
.menu-open img {
	width:30%; 
	float:left;
}
.menu-open p {
	margin-left:25%;
	margin-top:5%;
	text-transform:none;
}
#menu{
	position:relative;
}
.content-wrap {
	width:940px;
	margin:0 auto;
}
@media (min-width: 1200px) {
.content-wrap {
width: 1170px;
}
}
@media (min-width: 1400px) {
.content-wrap {
width: 1380px;
}
}
@media (max-width: 979px) and (min-width: 768px) {
	.content-wrap {
	width: 724px;
}
}
#menu ul li a:hover .menu-open{
	display:block;
}


Je cherche un erreur depuis plus de 15 jours Smiley bawling
Si quelqu'un peut trouver le problème je l'aime d'avance ^^
plus sérieusement je vais bientôt devoir rendre mon site c'est pour mon projet de licence, et sa m'ennuierai de rendre un site avec un menu qui ne marche pas Smiley eek

Merci d'avance Smiley biggrin
Bonjour et bienvenue sur le forum, Levasseur Smiley smile

Ta structure HTML ne me semble pas correcte. C'est étrange d'avoir mis un élément nav imbriqué dans le premier en wrapper de liste enfant… Dans tous les cas ce serait bien de nous donner une page de test en ligne ou de reproduire le bug sur un ptit jsFiddle par exemple, parce que là c'est pas très engageant pour trouver ce qui coince Smiley cligne
Modifié par audrasjb (13 Aug 2015 - 08:24)
Hello,

En fait c'est assez simple : il s'agit d'un problème de sélecteur.
Voici ton JS actuel pour gérer le menu :

   $('.menu-open').hide();
   $('#menu li a').click(function()
  {
	  $('.menu-open').not($(this).siblings('.menu-open')).hide();
      $(this).siblings('.menu-open').animate({opacity: 'toggle'}, 400); 
      return false;
   });
});

Il faut que tu cible uniquement le lien de premier niveau avec un sélecteur de descendance directe, tel que ">" car là, ce sont tous tes liens qui ont ce comportement de chercher à ouvrir la liste enfant (sous-menu), y compris les liens de ton sous-menu. Par exemple, tu pourrais typiquement faire :

   $('#menu > ul > li > a').click(function() … …

Cela ne sélectionne que le lien enfant direct d'un item de liste, enfant direct d'une liste, enfant direct d'un élément portant l'identifiant #menu Smiley smile
Modifié par audrasjb (13 Aug 2015 - 16:01)
Pour préciser : ce qui fait que rien ne se passait c'est que le lien de second niveau était donc concerné par ce script lui aussi, et finissait sur un return false qui lui empêchait de suivre sa cible Smiley cligne
Modifié par audrasjb (13 Aug 2015 - 16:02)
Merci beaucoup pour votre aide, j'ai trouvé une autre solution j'ai crée une fonction java onClick() et enlevé un fichier javascript relié en head qui faisait barrage à mon menu. Smiley biggrin
Encore merci =D
Sujet clos
Aller à