Forum : Aide Burger Menu

Bonjour,

Je cherche une solution depuis plusieurs jours mais en vain..

J'ai créé un burger menu, lors du clics sur les liens, je suis bien renvoyé vers l'endroit indiqué, mais le menu ne se ferme pas.

Si quelqu'un pouvait m'aider, cela serait super.

Merci beaucoup :)

Voici mon code :

HTML :

"<div class="cacher">
<i id="burger" class="material-icons" onclick="burger()">menu</i>
<i id="quit" class="material-icons" onclick="quit()">clear</i>
<div id="links">
<a href="#accueil">Accueil </a>
<a href="#ouquand">Où & Quand</a>
<a href="#notrehistoire">Notre histoire</a>
</div>
</div>"

JS :

"<script>
function burger(){
var burger = document.getElementById('burger');
var links = document.getElementById('links');
var quit = document.getElementById('quit');
burger.style.padding = '16px 16px 200vw 200vw';
links.style.display = 'flex';
quit.style.display = 'inline';
}
function quit(){
var burger = document.getElementById('burger');
var links = document.getElementById('links');
var quit = document.getElementById('quit');
burger.style.padding = '16px 16px 32px 32px';
links.style.display = 'none';
quit.style.display = 'none';
}
</script>"

2 réponses

Mickael Christine

Hello hello, si ta fonction quit() fonctionne bien, ajoute simplement ta fonction quit() sur tes liens

    <div class="cacher">
      <i id="burger" class="material-icons" onclick="burger()">menu</i>
      <i id="quit" class="material-icons" onclick="quit();return false;">clear</i>
      <div id="links">
        <a onclick="quit();return false;" href="#accueil">Accueil </a>
        <a onclick="quit();return false;" href="#ouquand">Où & Quand</a>
        <a onclick="quit();return false;" href="#notrehistoire">Notre histoire</a>
      </div>
    </div>

Tu pourrais d'ailleurs revoir ton code comme ceci

    <script>
      var burger = document.getElementById('burger');
      var links = document.getElementById('links');
      var quit = document.getElementById('quit');

      function burger(){
        burger.style.padding = '16px 16px 200vw 200vw';
        links.style.display = 'flex';
        quit.style.display = 'inline';
      }
      function quit(){
        burger.style.padding = '16px 16px 32px 32px';
        links.style.display = 'none';
        quit.style.display = 'none';
      }
    </script>

sarah.chn

Auteur

Merci beaucoup ! ça marche :)