18041 sujets

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

Menu qui ne fonctionne que sur codepen.io

Bonjour,

J'aimerais faire fonctionner en local un menu hamburger de codepen.io qui me plait beaucoup.

--> http://codepen.io/MrBambule/pen/jIseg

Malheureusement quand je l'adapte rien ne se passe sur l'evenement "onclick", le menu ne se déroule pas.
J'ai pourtant bien collé le js dans un fichier qui est bien déclaré dans le header de mon html...

Quelqu'un saurait-il m'éclairer svp? =)
Modifié par crazysifu (05 Jun 2015 - 17:25)
J'ai pourtant bien jquery déclaré également. :'(

<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="java.js"></script>
tu dois l'avoir en première ligne

$(document).ready(function(){

// ton code

}

et le code 

$(document).ready(function(){

// function to trigger animation
$('.button').click(function() {
  
  // check if the menu-items are hidden behind the button
  if ($('.menu__list').hasClass('hidden')) {
    // add class to make the menu-items drop down
    $('.item1').addClass('list--animation');
    // the following items trigger the animation after a certain delay
    $('.item2').addClass('list--animation--delay1');
    $('.item3').addClass('list--animation--delay2');
    // remove the hidden class from the ul container to show that the items are not hidden anymore
    $('.menu__list').removeClass('hidden');
  }
  else {
    // remove class to make the menu-items disappear
    $('.item1').removeClass('list--animation');
    $('.item2').removeClass('list--animation--delay1');
    $('.item3').removeClass('list--animation--delay2');
    // add the hidden class to the ul container to show that the items are now hidden again 
    $('.menu__list').addClass('hidden');
  }
  
});
}

Modifié par JENCAL (05 Jun 2015 - 17:55)
j'ai trouvé un autre code fonctionnel, merci pour les réponses. Smiley smile
Modifié par crazysifu (06 Jun 2015 - 16:42)
Sujet clos
Aller à