【JavaScript】ハンバーガーメニューの作成

1日1UI投稿

かなり時間が空きましたが、本日久しぶりに投稿します。

ハンバーガーメニュー

最初のころに作ったハンバーガーメニューとは違うハンバーガーメニューを作成しました。

以下完成品です。

See the Pen ハンバーガーメニュー2 by ri-tama (@ri-tama) on CodePen.

躓いたポイントを整理

CSS

.overlay{
    position: fixed; 
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(255,255,255,.8);
    opacity: 0;
    pointer-events: none;
    transition:opacity .6s;
}

今回ハンバーガーメニューをクリックすると
画面全体が透明な白になり、そこにMenuが3つ並ぶというUIを作成しました。

画面全体へのフィルター設定の仕方を失念しておりました。
position:fixed;と上下左右の0で画面全体に配置することが可能です。

JavaScript

JSに関してはかなり単純なものだと思いますが、1点だけ。

open.addEventListener('click',()=>{
      open.classList.add("show");
      overlay.classList.add("show");
    });

openをクリックしたときに、openとoverlayにshowというクラスを加える
というのが上記のコードですが
この時加えるクラスの(show)は(.show)では動作しません。

DOMを取得するときは...と考えてみると

  const overlay=document.querySelector(".overlay");

上記コードについては

こちらで言及されている通り

Document の querySelector() メソッドは、指定されたセレクターまたはセレクター群に一致する、文書内の最初の Element を返します。一致するものが見つからない場合は null を返します。

とされているので、一致するという意味で.overlayを取得して動作できているのでしょう。

最初の問題に戻ります。
classlistに(show)を追加してね！
という単純な命令をしており、ここにCSSの書き方である.クラス名と書いても
HTMLの方に追加されない！ということなんですね。
追加してね！って言っているのは、(show)であって(.show)ではないのですから。

というわけで本日は別バージョンのハンバーガーメニューの作成でした。
またアウトプットができるよう勉強していきます。
またDockerの勉強を始めましたので、そちらもアウトプットしていきたいと思います。

読んでいただきありがとうございました。