[Résolu] Probleme Menu Hamburger créer par moi même par paulfrance99 - page 1

Bonjour à tous, j'ai un petit soucis depuis ce matin et étant débutant en javascript j'ai un peu de mal à le résoudre.

En effet, je cherche à créer un menu hamburger pour mon site et pour ce faire voici mon code html/css/js:

<body onload="ChargementPage()" src="./JS/main.js">
    <header>
        <div id="menu_hamburger">
            <div class="container" onclick="ClickOnBurger(this)">          
                <div class="bar1"></div>
                <div id="barrecondition" class="bar2"></div>
                <div class="bar3"></div>
            </div>
            <div>
                <ul>
                    <li id="listeburger1" class="listemenuburger1">ACCUEIL</li>
                    <li class="listemenuburger2">PRESENTATION</li>
                    <li class="listemenuburger3">PARCOURS</li>
                    <li class="listemenuburger4">COMPETENCES</li>
                    <li class="listemenuburger5">CONTACT</li>
                </ul>
            </div>
        </div>
    </header>

/*  MENU BURGER  */
.container {
    display: inline-block;
    cursor: pointer;
    width: 50px;
    height: 50px; 
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: black;
    margin: 6px 0;
    transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

#menu_hamburger{
}

.listemenuburger1, .listemenuburger2, .listemenuburger3, .listemenuburger4, .listemenuburger5, .listemenuburger6{
    list-style-type: none;
    width: 150px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
    cursor: pointer;
}

.listemenuburger2, .listemenuburger3, .listemenuburger4, .listemenuburger5, .listemenuburger6{
    border-right-style:solid;
    border-left-style:solid;
    border-top-style: none;
    border-bottom-style:solid;
    border-right-width: 3px;
    border-left-width: 3px;
    border-bottom-width: 3px;
    border-color: black;
}

.listemenuburger1{
    border-top-style: solid;
    border-right-style:solid;
    border-left-style:solid;
    border-bottom-style:solid;
    border-top-width: 3px;
    border-right-width: 3px;
    border-left-width: 3px;
    border-bottom-width: 3px;
    border-color: black;
}
/*  */

function FonctionBurger(x)
{
    var retour = 0;
    x.classList.toggle("change");
    element = document.getElementsByClassName("bar2");

}

function ClickOnBurger(x)
{
    visible = document.getElementById("barrecondition");
    if( visible.style.opacity != 0)
        alert('test');
    else
        alert('non');
    FonctionBurger(x);
    
}

Enfait mon probleme est que je voudrais faire apparaitres ou disparaitrent les élements <li> en fonction de si je clique sur mon menu ou pas.

En soit je sait le faire mais je ne sais pas comment gérer le fait qu'il faut a tour de role faire apparaitre et disparaitre les élements <li> sur le meme évenement onclick.

Mon idée était d'utiliser le fait que ma deuxieme barre de div du menu burger ait une prop css opacity=0 quand je clique dessus et de m'en servir pour déterminer si mon menu doit etre ouvert ou fermer mais il y a quelque chose que je dois mal faire puisque mes tests d'alert() ne fonctionnent pas..

Merci d'avance et n'hésitez pas à me demander des précisions si je n'ai pas été clair,

Paul

Probleme Menu Hamburger créer par moi même

Probleme Menu Hamburger créer par moi même

Supprimer

Modérer

Signaler le message aux modérateurs