【jQuery】オーバーレイメニューを実装する

こんにちは、Ryohei（@ityryohei）です！

本記事では、jQueryでオーバーレイメニューを実装する方法をご紹介しています。

jQueryでオーバーレイメニューを実装したいんだけど、良い法ないかな？

上記の疑問にお答えします。

では、解説していきます。

オーバーレイメニューとは

オーバーレイとは「覆う」や「重ねる」といった意味を持つ単語で、何かの表面に他の要素を重ねて表示する場合などに使われる用語です。オーバーレイメニューというのは、画面上の表示の上に重ねる形で表示されるメニューのことで、最近では多くのWebサイトに取り入れられている手法です。モーダルメニューと呼ばれる場合もあります。

下記は本記事で作成するオーバーレイメニューのデモです。同じような表示を実装したい場合に参考にしていただければと思います。

See the Pen by ryohei (@intotheprogram) on CodePen.

オーバーレイメニューの実装

HTMLでレイアウトを組んでいきます。必要な要素としては、オーバーレイメニューの表示を切り替えるボタンと、メニュー本体ですね。ボタンに簡単な動きを付けたいので、span要素で設置しておきます。

HTML

<div class="overlayMenu">
  <div class="overlayMenuInner">
    <div class="overlayMenuHeader">Into the Program</div>
    <div class="overlayMenuItem">
<div class="overlay-menu">
    <div class="overlay-menu-inner">
        <div class="overlay-menu-header">Into the Program</div>
        <div class="overlay-menu-item">
            <ul>
                <li><a href="#">Menu Item 001</a></li>
                <li><a href="#">Menu Item 002</a></li>
                <li><a href="#">Menu Item 003</a></li>
                <li><a href="#">Menu Item 004</a></li>
                <li><a href="#">Menu Item 005</a></li>
                <li><a href="#">Menu Item 006</a></li>
                <li><a href="#">Menu Item 007</a></li>
                <li><a href="#">Menu Item 008</a></li>
                <li><a href="#">Menu Item 009</a></li>
                <li><a href="#">Menu Item 010</a></li>
                <li><a href="#">Menu Item 011</a></li>
                <li><a href="#">Menu Item 012</a></li>
                <li><a href="#">Menu Item 013</a></li>
                <li><a href="#">Menu Item 014</a></li>
                <li><a href="#">Menu Item 015</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="overlay-menu-btn">
    <span></span>
    <span></span>
    <span></span>
</div>
<h1>Overlay Menu</h1>

レイアウトの作成が完了したので、CSSで見た目を調整します。下記はデモで使っているCSSです。実際に使用される場合にはデザインに合わせてご変更いただければと思います。

SCSS

.overlay-menu {
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    overflow: auto;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 100000;
    
    &-btn {
        position: absolute;
        top: 30px;
        right: 4%;
        height: 50px;
        cursor: pointer;
        z-index: 100001;

        span {
            position: relative;
            display: block;
            width: 40px;
            border: 1px solid #999;
            transition: 0.5s;

            &:nth-child(1) { top: 0; }
            &:nth-child(2) { top: 10px; }
            &:nth-child(3) { top: 20px; }
        }
    }
    
    &-inner {
        padding: 10px 4% 40px 4%;
    }
    
    &-header {
        width: 100%;
        height: 60px;
        line-height: 60px;
        color: #333333;
        font-size: 32px;
    }
    
    &-item {
        ul {
            margin: 20px 0 40px 0;
            padding: 0;
            list-style-type: none;
            
            li {
                border-top: 1px solid #cccccc;
                
                &:last-child {
                    border-bottom: 1px solid #cccccc;
                }
                
                a {
                    display: block;
                    width: 96%;
                    padding: 20px 0 20px 4%;
                    color: #333333;
                    text-decoration: none;
                    transition: 0.5s;
                    
                    &:hover {
                           color: #fff;
                        background-color: #666666;
                    }
                }
            }
        }
    }
}

HTMLとCSSで表示部分は作成できましたので、jQueryで実際にオーバーレイメニューが動作するようにスクリプトを組んでいきます。スクリプトにはjQueryを使用しますので、本体ファイルを読み込みます。

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

上記を読み込んだ後、下記のスクリプトを参考にオーバーレイメニューの開閉処理を作成します。下記のサンプルではスクリプトで一部CSSのスタイルを上書きしていますが、classの付け外して実装する方法もありますので、好みの方法を選択していただければと思います。

jQuery

$(".overlay-menu-btn").on("click", function () {
    const overlayMenu = $(".overlay-menu");
    const openClass = "open";

    if (!overlayMenu.hasClass(openClass)) {
        $(".overlay-menu-btn span:nth-child(1)").css({
            transform: "rotate(-45deg)",
            top: "10px"
        });

        $(".overlay-menu-btn span:nth-child(2)").css({
            opacity: "0"
        });

        $(".overlay-menu-btn span:nth-child(3)").css({
            transform: "rotate(45deg)",
            top: "7px",
            border: "1px solid #00c2bc"
        });

        overlayMenu.addClass(openClass);
        overlayMenu.fadeIn("slow");
        $("body").css("overflow", "hidden");
    } else {
        $(".overlay-menu-btn span:nth-child(1)").css({
            transform: "rotate(0)",
            top: "0px"
        });

        $(".overlay-menu-btn span:nth-child(2)").css({
            opacity: "1"
        });

        $(".overlay-menu-btn span:nth-child(3)").css({
            transform: "rotate(0)",
            top: "20px",
            border: "1px solid #999"
        });

        overlayMenu.removeClass(openClass);
        overlayMenu.fadeOut("slow");
        $("body").css("overflow", "auto");
    }
});

以上、でオーバーレイメニューの実装は完了です。

最後に

2021年現在はJavaScriptにおけるブラウザ上の表示差異をそこまで気にする必要がなくなったため、Vanilla JS（純粋なJavaScript）やフレームワークを用いてフロントエンドを構築する例が増えてきました。

しかし、2020年以前に構築されたWebサイトではjQueryが使用されていることが多いため、改修作業等でjQueryに触れる機会は多々あります。学習コストもそこまで高くない上に現役で使用されている技術ですので、優先順位はそこまで高くないですが、余力がある方はjQueryをある程度理解しておくと良いかもしれませんね。

以上、jQueryでオーバーレイメニューを実装する方法のご紹介でした！