I'll be NET 】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > CSS> 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%;
}

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

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

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

記事移動

関連記事

iphone の safari でアドレスバーや標準メニューが消えない時に確認した方がいいCSSの設定

レスポンシブ対応・スワイプ可能な多機能スライドショーjQueryプラグイン「Slider Pro」

レスポンシブ対応・スワイプ可能な多機能スライドショーjQueryプラグイン「Slider Pro」

jQueryプラグイン「Infinite Scroll」と「Masonry」を利用して無限スクロールのギャラリーを作成する方法

Masonryを利用した時要素が重なるなどうまく並び変えられない場合の「imageLoaded」を利用した対処法

要素をタイル状に表示する超有名jQueryプラグイン「Masonry」の基本的な使い方

フルスクリーンで背景を表示するスライドショーにも対応可能なjQueryプラグイン「MaxImage2」

フルスクリーンで背景を表示するスライドショーにも対応可能なjQueryプラグイン「MaxImage2」

Comment Form

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

Tagcloud