最もシンプルなモーダルメニューの作り方【簡単なCSSとJavaScriptで実装】

モーダル表示されるメニューとして紹介しますが、
メニューリストの代わりにYouTube動画を埋め込んで、
サムネイル画像用意しクリックしたら動画再生見ないなこともできます。

デモ

See the Pen 最もシンプルなモバイル時のメニュー表示 by blanket11 (@blanket11hal) on CodePen.

『メニュー』となっているところをタップ(クリック)すると、
ぼわーんと、モーダル表示でメニューが出てくるというものです。

これの作り方を解説してきます。

解説

最も重要なのは数行のCSSだけ

.menu {
  // (省略)
  // 今回のポイント①
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all 1s ease;
  // (省略)

  &.is-show {
    // 今回のポイント②
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
}
// (省略)

『今回のポイント①』と『今回のポイント②』の部分がポイントです。

今回のポイント①

CSSは、この３つがあれば簡易的なモーダルが実装できます。

opacityは、
透過を変化させて視覚的に変化させるのに使用します。
ドキュメントリンク: opacity – CSS: カスケーディングスタイルシート | MDN

pointer-eventsは、
ポインターイベントの無効化させるのに使用します。これで、中の要素のリンク等が触れない状態になります。
ドキュメントリンク: pointer-events – CSS: カスケーディングスタイルシート | MDN

visibilityは、
要素がそこにあるのにないことにすることができます。
ドキュメントリンク: visibility – CSS: カスケーディングスタイルシート | MDN

アニメーションをさせるには、
transitionを指定することでなめらかなアニメーションになります。
『transition: all 1s ease;』の部分を調整してください。

今回のポイント②

デモでのソースコードでは、
『is-show』とクラスを付与したら表示されるようにしています。

opacity を 0から1 へ
pointer-events を none から auto へ
visibility を hidden から visible へ

と、非表示の設定からデフォルト値へと変化させます。
CSSはこの数行ので準備完了です！

JavaScript は is-show をとったりつけたりするだけ！

JavaScriptで先ほど用意した、
『opacity』・『pointer-events』・『visibility』を変化させる『is-show』クラスをつけたり外したりするだけです。

let button = document.getElementById('js-button');
let menu = document.getElementById('js-menu');
let close = document.getElementById('js-close');

/*
ボタンがクリックされたら、
メニュー表示させる
*/
button.addEventListener('click',()=>{
  menu.classList.add('is-show');
});


/*
閉じるボタンを押したら
メニューを閉じる
*/
close.addEventListener('click', (evemt) => {
  menu.classList.remove('is-show');
});

最低限のJavaScriptはこのように、
何かを押したら、『is-show』をつけて。
何かを押したら、『is-show』を外す。
の様に記述します。

簡単！便利！最高！です！

さらに、作りこみで、
モーダルの枠外をクリックしたら閉じる処理は下記の記事で紹介してるのでそちらをご覧ください！

使えない場面は？

シンプルがゆえに使えない場面は、
モーダルメニューで画面以上に高さがあり、下にスクロールするようなメニューの場合は、満足いくような見た目にならないかもしれません。

画面いっぱいで収まる程度のモーダルの場合、
ぜひ使ってみてください。

まとめ

今回は、
最もシンプルなモーダルメニューの紹介をしました。

シンプルなモーダルの作り方なので、
使用頻度も多いので知らなかったらぜひ使ってみてください。