【jQuery】マウスオーバーで開くサイドメニュー

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

本記事では、jQueryを使ってマウスオーバーで開くサイドメニューの実装方法をご紹介しています。

マウスオーバーで開くサイドメニューを作りたいだけど、どうすればいいんだろう？

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

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

本記事で作成するもの

jQueryを使って、マウスオーバーで開くサイトメニューを作成します。具体的には下記のデモの内容となります。

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

jQueryを読み込む

GoogleのCDNを利用してjQueryを読み込みます。

CDNというのはContents Delivery Network(コンテンツ・デリバリー・ネットワーク)の略称で、ネットワークを経由してウェブコンテンツを利用するサービスを指します。ネットワークに接続されている機器であれば利用することができます。

CDNには有料、無料のものがありますが、jQueryのライブラリファイルは無料で利用できます。

jQueryのライブラリは以下の記述で読み込むことができます。

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

サイドメニュー

メニューを記述します。メニューのコンテンツが増えたときにスクロールが必要になるため、インナーを設けています。mainタグはデモ用の記述になります。

HTML

<aside class="sidemenu">
    <div class="sidemenu__inner">
        <ul>
            <li><a href="#">Item 01</a></li>
            <li><a href="#">Item 02</a></li>
            <li><a href="#">Item 03</a></li>
            <li><a href="#">Item 04</a></li>
            <li><a href="#">Item 05</a></li>
            <li><a href="#">Item 06</a></li>
            <li><a href="#">Item 07</a></li>
            <li><a href="#">Item 08</a></li>
            <li><a href="#">Item 09</a></li>
            <li><a href="#">Item 10</a></li>
            <li><a href="#">Item 11</a></li>
            <li><a href="#">Item 12</a></li>
            <li><a href="#">Item 13</a></li>
            <li><a href="#">Item 14</a></li>
            <li><a href="#">Item 15</a></li>
        </ul>
    </div>
</aside>

<!-- ここにメインコンテンツ -->
<main>
    <h1>Contents</h1>
    <p>左のバーをマウスオーバーするとメニューが開きます。</p>
</main>

SCSS（CSS）

以下、CSSです。

position: fixedを使用してサイドメニューを固定し、leftにマイナスの値を指定することでサイドメニューが隠れた状態にしています。また、右側にpaddingを持たせて画面上にバーの一部を表示するようにしています。

.sidemenu {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    padding: 0 50px 0 0;
    background: rgba(0, 0, 0, 0.9);
    
    &__inner {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        
        ul {
            
            li {
                width: 100%;
                height: 75px;
                line-height: 75px;
                font-size: 18px;
                list-style-type: none;
                
                a {
                    color: #ffffff;
                }
            }
        }
    }
}

jQuery

以下、スクリプトです。

animateでpadding-leftをコントロールしてサイドメニューの開閉を実装しています。stopは開閉途中にマウスオーバーしたときの対策です。stopなしの場合、マウスオーバーした分だけ遅れてメニューが開閉してしまうので注意しましょう。

$(".sidemenu").hover(
    function () {
        $(this).stop(true).animate({ "padding-left": "300px" }, 500);
    },
    function () {
        $(this).animate({ "padding-left": "0px" }, 500);
    }
);

参考：https://api.jquery.com/stop/