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

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

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

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

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

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

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

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

完成形

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

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

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」が適用または不適用となる

おわりに

今回はWeb制作で頻出の「スライドメニュー(jQuery)」の実装でした。

使える部分はコピペして制作の時短につなげていただければ幸いです。

コメントを残す

メールアドレスが公開されることはありません。