realiser un site responsive en js pour bouton(3 traits horizontaux)

AHASSA
Les bases HTML/CSS
Javascript 
 "
 **CODE HTML et JS**

<body>

        <a class="icon" onclick="myFunction()">&#9776;</a>
    </header>

    <script>
            function myFunction() {
                var x = document.getElementById("navbar");
                if (x.className === "nav") {
                    x.className += " responsive";
                } else {
                    x.className = "nav";
                }
            }

    </script>
</body>

"

Ce que je veux

J'aimerais que lorsque nous sur un telephone, un bouton( 3 traits horizontaux) apparaisse et un clic dessus engendre le depliement un menu et un autre clique pour le replier.

Ce que j'obtiens
Le menu horizontal ne fonctionne pas et ne s'affiche d'ailleurs plus.
Décrivez vos éventuelles erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

2 réponses

MickaelTD

Hello tu n'as pas besoin de JS pour faire ceci, tu peux le faire en HTML css avec un bouton ou un input de type checkbox. Voici un exemple avec un input checkbox.

https://codepen.io/erikterwan/pen/EVzeRP

Lartak

Bonjour.
Petits conseil pour ton code JavaScript.
Évites de créer une fonction pour un code ausisi simple que celui-ci.
Lorsque tu veux travailler sur les valeurs des classes, utilises plutôt la propriété classList, qui te permettra entre autre de supprimer, ajouter remplacer des noms de classes, par conséquent, ton code pourrait être remplacé par ceci:

const iconMenu = document.getElementById('icon_menu')
iconMenu.addEventListener('click', () => {
    const navbar = document.getElementById('navbar')
    if (navbar.classList.contains('responsive'))
        navbar.classList.remove('responsive')
    else
        navbar.classList.add('responsive')
})

En donnant bien sur un identifiant au lien.
Mais pour en revenir à ton sujet, comme l'a dit MickaelTD, c'est largement faisable juste avec du CSS.