メニューを閉じる

2021-08-29

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

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

: クリックしたらメニューを表示する

クリックしたらメニューが表示されるようにクラスを操作していきます。 clickイベントの作成 showクラスの作成 hideクラスの作成 clickイベントの作成・では前回の続きです。前回まででma ...

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

・まず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');

});

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

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

・こんな感じですね。

transition: opacity .6s;