Partage

Probleme Menu Hamburger créer par moi même

Sujet résolu
3 janvier 2018 à 12:30:16

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

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%

Probleme Menu Hamburger créer par moi même

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown