【コピペOK】スライドメニューのサンプル（jQuery）を紹介

こんにちは、Webクリエイターのたかひで（@takahide_web）です。

「スライドメニューのサンプル（jQuery）」について紹介していこうと思います。

あなたはこんなお悩みないでしょうか。

ページに動きのあるサイドメニューを実装したいけど、一から自分で作るのは大変なんだよね。

時間もかかるし、参考になるサイトないかな。

そんなあなたに今回はjQueryを使ったよく使われるスライドメニューについて紹介します。

サンプルとして完成形とコード内容も載せているので是非参考にしてください。

Contents

1 完成形
2 コードを確認
3 解説
4 おわりに

完成形

スライドメニューの完成版サンプル

右上のハンバーガーメニューを押すと右からスライドメニューが現れます。

https://slidemenu.takahide-web.info/

・ハンバーガーメニューを押す前

・ハンバーガーメニューを押した後

コードを確認

それではコード内容を見ていきましょう。

HTMLの内容

<body>
    <div id="wrapper">
        <header>
            <div class="container">
                <div class="title-block">
                    <h1>スライドメニュー</h1>
                    <h2>ヘッダーにボタンを設置する</h2>
                </div>
                <div class="hamburger" id="open_nav">
                    <img src="hamburger.png" alt="">
                </div>
            </div>
        </header>
        <main>
            <div class="container">
                <section>
                    <div class="key">
                    </div>
                    <div class="content">
                        <h1>Web制作</h1>
                        <p>今月の特集は「Web制作」<br>〇〇〇〇〇〇〇〇〇〇〇〇
                            <br> ✖️✖️✖️✖️✖️✖️✖️✖️✖️✖️
                        </p>
                    </div>
                </section>
            </div>
        </main>
    </div>
    <nav id="nav">
        <div class="logo"></div>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">今月の特集</a></li>
            <li><a href="#">料金</a></li>
            <li><a href="#">お客様の声</a></li>
            <li><a href="#">お問い合わせ</a></li>
        </ul>
    </nav>

    <script src="jquery-3.6.0.min.js"></script>
    <script>
        'use strict'
        $(document).ready(function() {
            $('#open_nav').on('click', function() {
                $('#wrapper,#nav').toggleClass('show');
            });
        });
    </script>
</body>

CSSの内容

/* スライドメニューに必要なCSS */

#nav {
    position: fixed;
    right: -270px;
    top: 0;
    width: 270px;
    height: 100%;
}

.show {
    transform: translate3d(-270px, 0, 0);
}


/* 開く閉じるのアニメーションに必要なCSS */

#wrapper,
#nav {
    transition: transform 0.3s;
}

#wrapper {
    position: relative;
    padding-bottom: 60px;
    box-sizing: border-box;
    min-height: 100vh;
}

解説

cssの解説

スライドメニューのid「#nav」で幅270pxに設定

通常時は、スライドメニューright:-270pxにより、画面の外に出ています。

最初はクラス「show」がない状態ですが、この後実行する<script>以降でクラス「show」が追加され、transform: translate3d(-270px, 0, 0);で左に270px移動し、スライドメニューが出現します。

/* スライドメニューに必要なCSS */

#nav {
    position: fixed;
    right: -270px;
    top: 0;
    width: 270px;
    height: 100%;
}

.show {
    transform: translate3d(-270px, 0, 0);
}

jQueryの解説

<div id=”wrapper”>と<nav id=”nav”>にクラス「show」を追加したり、削除したりしてスライドメニューを出現させるプログラムです。

<script>
        'use strict'
        $(document).ready(function() {
            $('#open_nav').on('click', function() {
                $('#wrapper,#nav').toggleClass('show');
            });
        });
</script>

ハンバーガーメニューに設定した<div class=”hamburger” id=”open_nav”>〜</div>をクリックした時にイベントが発生

→　$(‘#wrapper,#nav’)でid「wrapper」とid「nav」の要素を取得

→　toggleClassメソッドで取得した要素にクラス「show」を追加または削除を実行

→　cssに記載のクラス「show」が適用または不適用となる