Soucis avec un menu HTML et JS.

Soucis avec un menu HTML et JS. - HTML/CSS - Programmation

Marsh Posté le 05-04-2020 à 17:50:02    

Bonjour,
 
Je rencontre un petit soucis que je n'arrive pas à résoudre.
 
Lorsque je clique sur un lien du menu, ça me renvoi bien dans le bon "id". Cependant, le menu ne se ferme pas :(
Je le vois le bon "id" car mon css est en transparence.
 
Sauriez-vous m'aider svp ?
 
Merci par avance.
 
Code HTML :
 

Code :
  1. <div id="menu-burger">
  2.   <span class="menu-icon"></span>
  3. </div>
  4. <div id="overlay-menu">
  5. <nav role='navigation'>
  6.   <ul>
  7.     <li><a href="#aaaa">aaaa</a></li>
  8.     <li><a href="#bbbb">bbbb</a></li>
  9.     <li><a href="#cccc">cccc</a></li>
  10.     <li><a href="#dddd">dddd</a></li>
  11.     <li><a href="mailto:moi@moi.com">Contact</a></li>
  12.   </ul>
  13. </nav> 
  14. </div>


 
 
Code JS :
 

Code :
  1. $('#menu-burger').click(function() {
  2.   var overlayMenu = $('#overlay-menu'),
  3.       menuIconLines = $('#menu-burger .menu-icon'),
  4.       menuBurger = $('#menu-burger');
  5.  
  6.   if(overlayMenu.hasClass('open')) {
  7.     overlayMenu.removeClass('open');
  8.     menuIconLines.removeClass('open');
  9.     menuBurger.removeClass('open');
  10.   }else{    overlayMenu.addClass('open');
  11.             menuIconLines.addClass('open');
  12.             menuBurger.addClass('open');
  13.   };
  14.  
  15.  
  16. })


---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
Reply

Marsh Posté le 05-04-2020 à 17:50:02   

Reply

Marsh Posté le 05-04-2020 à 19:26:59    

Bonjour,

 

Manque le CSS + ceci est bizarre :

Code :
  1. menuBurger.removeClass('open');


Mais tu as attaché ton évènement de 'click' dessus, donc une fois qu'il sera caché tu ne pourras plus cliquer dessus. :pt1cable:


Message édité par MaybeEijOrNot le 05-04-2020 à 19:27:31

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 05-04-2020 à 19:28:43    

J'ai finalement réussi à ce que ça fonctionne.
J'avais oublié dans mon premier post de mettre mes tentatives sur le script de fermeture, désolé.
 

Code :
  1. // Ouverture du menu
  2. $('#menu-burger').click(function() {
  3.   var overlayMenu = $('#overlay-menu'),
  4.       menuIconLines = $('#menu-burger .menu-icon'),
  5.       menuBurger = $('#menu-burger');
  6.  
  7.   if(overlayMenu.hasClass('open')) {
  8.     overlayMenu.removeClass('open');
  9.     menuIconLines.removeClass('open');
  10.     menuBurger.removeClass('open');
  11.   }else{    overlayMenu.addClass('open');
  12.             menuIconLines.addClass('open');
  13.             menuBurger.addClass('open');
  14.   };
  15.  
  16.  
  17. })
  18. // Fermeture du menu après avoir cliqué sur un lien
  19. $( '#overlay-menu nav ul li a' ).on("click", function(){
  20.   $('#menu-burger').click();
  21. });


---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed