Fonction afficher/cacher menu responsive

Zeuhs
Javascript

Bonjour à tous,

Tout d'abord, je vous souhaite de bonnes fêtes de fin d'année!

Ce que je fais

J'essaye de créer ma fonction par le biais de jquery afin d'afficher et cacher un menu lorsque je suis au format mobile.
Cependant, après plusieurs essais différents, j'arrive à afficher le menu mais pas à le cacher.
Voici mon code HTML :

<header class="header">
<div id="menu-content">
<a id="menu-icon" class="menu-close"><img class="menu-icon" src="img/bar-menu.png" alt="menu" /></a>
<ul class="menu" id="menu">
<a id="btn-accueil" href="#accueil"><li>ACCUEIL</li></a>
<a id="btn-apropos" href="#equipe"><li>À PROPOS</li></a>
<a id="btn-portfolio" href="#projet"><li>PORTFOLIO</li></a>
<a id="btn-contact" href="#travaux"><li>CONTACT</li></a>
</ul>
</div>
</header>

(mon "menu-icon" a par défaut la class "menu-close")
Voici le code CSS sur le menu "menu-icon" ainsi que mon header :

@media only screen and (max-width: 775px) {
.header {
z-index: 10000;
overflow: hidden;
}

#menu-icon {
    display: block;
    width: 40px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    cursor: pointer;
}

}

(il est par défaut en .hidden)
et enfin mon code js (jquery) :

$(document).ready(function() {
var iWindowsSize = $(window).width();
if (iWindowsSize < 775 && $("#menu-icon").hasClass("menu-close")){
$(document).on('click', ".menu-close", function() {
console.log("je passe dans close");
$(".menu-icon").attr('src', "img/close-menu.png");
$(".header").css({
overflow : 'visible',
});
$("#menu-icon").addClass("menu-open").removeClass("menu-close");
});
}
if (iWindowsSize < 775 && $("#menu-icon").hasClass("menu-open")){
$(document).on('click', ".menu-open", function() {
console.log("je passe dans open");
$(".menu-icon").attr('src', "img/bar-menu.png");
$(".header").css({
overflow : 'hidden',
});
$("#menu-icon").addClass("menu-close").removeClass("menu-open");
});
}
});

Ce que je veux

Donc j'aimerai que lorsque je clique sur mon icone "menu hamburger" (donc avec la class "menu-close"), l'icone hamburger se transforme en icone "croix", que le menu s'ouvre (donc overflow: visible) et à l'inverse, lorsque je clique sur l'icone "croix" (donc avec la class ".menu-open"), l'icone repasse en hamburger et le menu (.header) repasse en overflow: hid

Ce que j'obtiens

J'ai remarqué que lorsque je clique sur mon bouton avec la class "menu-close", le première fonction s'effectue en boucle, alors que logiquement elle devrait passer à la boucle "if" suivante puisque je change la classe ".menu-open" !
En ayant essayé de débugger par le biais des "console.log("je passe dans open");" et "console.log("je passe dans close");" j'ai également remarqué dans la console qu'au premier click sur le menu, le "je passe dans close" s'affiche 2 fois !

Merci d'avance pour l'éventuelle aide que vous pourrez m'apporter...!

Aucune réponse