> JavaScript/jQuery > CSSとjQueryで作るメニュー表示時にコンテンツのスクロールをさせないドロワーメニュー
CSSとjQueryで作るメニュー表示時にコンテンツのスクロールをさせないドロワーメニュー

CSSとjQueryで作るメニュー表示時にコンテンツのスクロールをさせないドロワーメニュー

最近よ見かける画面の左や右からにゅるっと出てくるドロワーメニューです。
バーガーメニュー・ナビゲーションドロワーなどとも呼ばれます。

スタイルシートだけで実現するもの、jQueryプラグインを利用するものなど様々ありますが、今回はCSSとjQueryでメニューを開いた時に画面の余白部分(コンテンツ)をスクロールさせないドロワーメニューを作成してみます。

参考にさせていただいたサイトは記事最下部に記載させていただきました。

DEMO

ドロワーメニューのHTMLサンプル

たとえば下記のようなHTMLでドロワーメニューを実現します。

<div id="wrap">
    <header>
        <h1>タイトル</h1>
        <input id="nav-input" type="checkbox" class="nav-unshown">
        <label id="nav-open" for="nav-input"><span></span></label>
        <label class="nav-unshown" id="nav-close" for="nav-input"></label>
        <nav id="nav-content">
            <ul>
                <li>メニューです</li>
                <li>メニューです</li>
                <li>メニューです</li>
            </ul>
        </nav>
    </header>
    <main>
        <p>コンテンツです</p>
    </main>
    <footer>
        <p>フッターです</p>
    </footer>
</div>

ドロワーメニューのCSSサンプル

/*メニュー表示非表示切替用チェックボックス*/
.nav-unshown {display:none;}

/*メニューを開く用ボタン*/
#nav-open{
    display: inline-block;
    width: 25px;
    height: 25px;
    vertical-align: middle;
}
#nav-open:hover{
    cursor: pointer;
}
#nav-open span, #nav-open span:before, #nav-open span:after {
    position: absolute;
    height: 3px;/*線の太さ*/
    width: 25px;/*長さ*/
    border-radius: 3px;
    background: #fff;
    display: block;
    content: '';
    cursor: pointer;
}
#nav-open span:before {bottom: -8px;}
#nav-open span:after {bottom: -16px;}

/*メニューを閉じるカバーエリア*/
#nav-close {
    display: none;/*はじめは隠しておく*/
    position: fixed;
    z-index: 9998;/*最前面のすぐ下に表示*/
    top: 0;/*全体に広がるように*/
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
}

/*メニューの内容*/
#nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;/*最前面に表示*/
    width: 80%;/*右側に隙間を作る(閉じるカバーを表示)*/
    max-width: 330px;/*最大幅(調整してください)*/
    height: 100%;
    background: #fff;/*背景色*/
    transition: .3s ease-in-out;/*滑らかに表示*/
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);/*左に隠しておく*/
}
#nav-input:checked ~ #nav-close {
    display: block;/*メニューを閉じるカバーを表示*/
    opacity: .5;
}
#nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);/*中身を表示(右へスライド)*/
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

メニューを開くボタン(label#nav-open)をクリック(タップ)すると、#nav-inputのチェックボックスにチェックが入り、メニューを閉じるカバー(label#nav-close)が全画面に表示され、その上にメニュー(#nav-content)が表示されます。

このままでは画面をスクロール すると#nav-closeより下のメインコンテンツ部分がスクロールしてしまうので、スクロールを止めるために下記jQueryを利用します。

メインコンテンツ部分のスクロールを止めるjQuery例

$(function(){
    //menu|メニュー表示時のスクロール止め
    var scrollpos;
    $('#nav-open').on('click', function(){
        scrollpos = $(window).scrollTop();
        $('body').addClass('fixed').css({'top': -scrollpos});
        $('#nav-open').addClass('open');
    });
    $('#nav-close').on('click', function(){
        $('body').removeClass('fixed').css({'top': 0});
        window.scrollTo( 0 , scrollpos );
        $('#nav-open').removeClass('open');
    });
});

#nav-open押下時にBODYタグにfixedクラスを付与し、#nav-close押下時にBODYタグのfixedクラスを除去します。
fixedクラスは下記のようにしています。

.fixed {
    position: fixed;
    width: 100%;
    height: 100%;
}

上記のようにすると、メニューを開いた時に画面の余白部分(コンテンツ)をスクロールさせないドロワーメニューを実現できます。

参考にさせていただいた記事

当記事の作成に下記サイトを参考にさせていただきました。
有益な情報を公開していただきありがとうございます。

この記事が気に入ったらシェアしてください

関連記事

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

SyntaxHighlighterでの表示を色々カスタマイズしてみる

SyntaxHighlighterでの表示を色々カスタマイズしてみる

クリックするとトリガーが×になるドロワーメニュー

クリックするとトリガーが×になるドロワーメニュー

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)