アニメーションのハンバーガーボタンをクリックしてナビゲーションを開く/閉じる

Question

ハンバーガーメニューをクリックすると右からスライドしてメニューを作成しようとしています。ユーザーがXをクリックすると（メニューがクリックされたときにハンバーガーメニューがアニメーション化される）、またはユーザーが画面上の他の場所をクリックしたときにメニューを閉じるようにします。

<button class="hamburger hamburger--spin" type="button"> 
    <span class="hamburger-box" onclick="openNav()"> 
    <span class="hamburger-inner"></span> 
    </span> 
</button> 

<div id="sideMenu-animated" class="sideMenu"> 
    <a href="#">Item 1</a> 
    <a href="#">Item 2</a> 
    <a href="#">Item 3</a> 
    <a href="#">Item 4</a> 
    <a href="#">Item 5</a> 
    <a href="#">Item 6</a> 
</div> 

<script> 
    function openNav() { 
     document.getElementById("sideMenu-animated").style.width = "400px"; 
    } 
    function closeNav() { 
     document.getElementById("sideMenu-animated").style.width = "0"; 
    } 
</script> 
<script> 
    var hamburger = document.querySelector(".hamburger"); 
     hamburger.addEventListener("click", function() { 
      hamburger.classList.toggle("is-active"); 
     } 
    ); 
</script> 

ユーザーがメニューアイコンをクリックしたときに、今、私はそれはそう設定した基本的に、それがアクティブになり、これを行うXにメニューアイコンをアニメーション化も（私のopenNav（）関数をトリガメニューを作りますアイテムが表示されます）。

Answer 1

すべてが整っているようですが、closeメソッドを呼び出す必要はありません。

あなたのHTMLにonclickを削除することから始めます。クリックハンドラ内でis-activeクラスをチェックして、ボタンがクリックされてメニューが開いているか閉じているかを確認できます。

hamburger.addEventListener("click", function() { 
    this.classList.toggle("is-active"); 
    if (this.classList.contains('is-active')){ 
     openNav(); 
    } else { 
     closeNav(); 
    } 
} 

閉鎖するページをクリックするために、私は、メニューの後ろに、ページのコンテンツ上にある「オーバーレイ」を組み込むためにしようとするだろう。ページビュー全体をカバーするようにします。

これで、ボタンと同じ方法でクリックハンドラを追加して、ハンバーガーボタンのクリックをトリガすることができます。