メニューを閉じる

バツ印アイコンをクリックしたときにメニューが閉じるようにしていきます。

• closeにclickイベントの作成
• クラスの削除
• transitionの設定

closeにclickイベントの作成

・前回の続きをしていきます。前回まででメニューアイコンをクリックするとメニューが開くようにJavaScriptで書いていきました。

・今回は開いたメニューバーを閉じるイベントを作っていきます。やり方は前回やった方法と逆のことをやればいいので簡単です。

・まずJavaScriptでcloseのidを取得していきます。ここも同様に定数をつけてあげると便利です。idはgetElementByIdで取得できます。

こんな感じです。

 const close = document.getElementById('close');

クラスの削除

・次にaddEventListenerでクリックイベントを作っていきます。

・closeに対してaddEventListenerををつけクリックしたら波括弧の中のイベントを行うと書いていきます。

・波括弧の中身はremoveを使ってshowとhideを外していけばいいのでそのように書いていきます。

・こんな感じです。

  close.addEventListener('click', () => {

    overlay.classList.remove('show');

    open.classList.remove('hide');

  });

transitionの設定

・ついでにアニメーションを追加していきます。今回は0.6秒かけてふわっと画面が切り替わるようにしていきます。

・CSSの.overlayに対してtransitionを指定していけばいいのでそのように書いていきます。opacity .6sと書いていくとふわっと変化してくれます。

・こんな感じですね。

transition: opacity .6s;