Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
543 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Soucis avec un menu HTML et JS.

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Soucis avec un menu HTML et JS.

n°2350843
snowden
Posté le 05-04-2020 à 17:50:02  profilanswer
 

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. »
mood
Publicité
Posté le 05-04-2020 à 17:50:02  profilanswer
 

n°2350851
MaybeEijOr​Not
but someone at least
Posté le 05-04-2020 à 19:26:59  profilanswer
 

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.
n°2350853
snowden
Posté le 05-04-2020 à 19:28:43  profilanswer
 

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. »

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Soucis avec un menu HTML et JS.

 

Sujets relatifs
[OpenAPI - Maven] Generation HTML depuis yaml OAS 3html style recursif
interface utilisateur modifiant contenu HTML et CSS[html] fonction scroll
besoin d'aide sur blogger et menu deroulant a plusieurs niveaux[React/JS] Actualiser image dans le front
Afficher flux http dans page htmlOmbre portée sur menu déroulant
Menu en MVVM C#Aggrandir une image de Portfolio en cliquant / JS
Plus de sujets relatifs à : Soucis avec un menu HTML et JS.


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR