5568 sujets

Sémantique web et HTML

[Résolu] Les liens ne fonctionnent pas dans nav

Bonjour,

J'ai un petit soucis avec ce bloc de code que j'ai trouvé sur une bibliothèque JQuery.
Les liens de la nav ne fonctionnent pas, et je ne comprends pas pourquoi!
Est ce que ça vient du code JavaScript? du code HTML?

Si quelque'un peut m'aider, ça serait super... Smiley decu

http://codepen.io/fairway/pen/ygEPax


D'avance merci Smiley biggrin
Bonjour,

La fonction event.preventDefault() va annuler l'évènement du lien, soit la redirection vers la page indiquée en href.

Les intitulés parents comme "Services" n'ont à priori aucun intérêt à être des liens. Si tu supprimes donc le lien à leur niveau, tu n'auras à première vue plus besoin de event.preventDefault() dans ton javascript, et ton problème sera réglé !
Merci pour ta réponse, mais j'ai besoin de garder les sous menus.. Services , c'est juste pour l'exemple.. je changerai les intitulés après...Le problème vient donc du code JavaScrip?
Je ne parle pas de supprimer les intitulés, uniquement les tags <a /> où ils ne sont pas nécessaires.

Le problème n'est pas uniquement du côté du Javascript mais c'est en effet lui qui "bloque" la redirection du lien.

Je te conseillerais pour aller au plus simple, de transformer les liens des parents de tes sous-menus en élément neutre (div ou span) avec une class pour les cibler, .menu-label par exemple. Puis d'appeler l'évènement click sur ce dernier au lieu de l'ensemble des tags <a />.

Ça ressemblerait à :

<li>
      <div class="menu-label">
            <i class="fa fa-laptop"></i>Services <i class="fa fa-caret-down"></i>
      </div>
      <ul>
            <li><a href="https://www.google.fr">Service</a></li>
            <li><a href="https://www.google.fr">Service</a></li>
            <li><a href="https://www.google.fr">Service</a></li>
      </ul>
</li>




$("#menu .menu-label").click(function(event){
	if($(this).next('ul').length){
		$(this).next().toggle('fast');
		$(this).children('i:last-child').toggleClass('fa-caret-down fa-caret-left');
	}
});
Je commence à comprendre, avec ce nouveau code tout fonctionne, je perds juste la mise en forme CSS sur le div class=" menu-label"... on s'approche de la solution, je cherche...
En effet, les styles CSS étant appliqué directement à la balise <a />. Il faut également les appliquer à .menu-label.

Ex :

#menu ul li a,
.menu-label {
  color: inherit;
  font-size: 16px;
  display: block;
  padding: 8px 0 8px 7px;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-weight: 600;
}

#menu ul a i,
.menu-label i {
  margin-right: 10px;
  font-size: 18px;
  margin-top: 3px;
  width: 20px;
}


À appliquer sur les autres règles CSS ciblant les liens et devant servir à .menu-label.
J'ai un peu transpiré pour trouver ce qui s'approche le plus de la présentation d'origine.
Une ou deux imperfections !!

En tout cas merci... faut surtout que je me mette au Javascript !!!


.menu-label { 
  border-bottom: 0px solid #2a2a2a;
  border-left: 4px solid #222;
  font-size: 18px;
  margin-top: 0px;
  cursor: pointer;
}

.menu-label {
  color: inherit;
  font-size: 16px;
  display: block;
  padding: 8px 0 8px 7px;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-weight: 100;
}

.menu-label:hover {
  background-color: #111;
  border-left-color: #FFCC33;
  color: #FFCC33;
}

.menu-label [class*='fa-caret'] { 
  float: right;
  margin-right: 10px; 
  padding-top: 3px;
}

Modifié par fairway (05 Feb 2017 - 20:48)
Meilleure solution
Sujet clos
Aller à