[jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る

スマートフォンやレスポンシブサイトなどでよく見かける、メニューボタンをクリックするとコンテンツを押し出してメニューがスライドインしてくる動きを jQuery と CSS で作る方法です。やってみると意外と簡単なコードで作ることができます。

サンプルデモとダウンロード

◆ 横からスライドインするメニュー demo|memocarilog

このサンプルコードは以下よりダウンロードできます。
◆ SaoriMiyazaki/SlideIn_Menu

HTMLコード

スライドインしてくるメニューとメニューボタンの記述をします。

<!-- スライドメニュー部分-->
<nav id="slide_menu">
	<ul>
		<li><a href="#">menu1</a></li>
		<li><a href="#">menu2</a></li>
		<li><a href="#">menu3</a></li>
		<li><a href="#">menu4</a></li>
		<li><a href="#">menu5</a></li>
    </ul>
</nav>

<!--メニューを出すボタン-->
<button id="button"><i class="fa fa-bars"></i> Menu</button>

CSSコード

動きに必要なところだけ抜き出しました。

まず、body に対して position: relative; を指定し position 位置の起点にします。そして、overflow-x を hidden にして横幅からあふれたものに対してだけ非表示にします。overflow にしてしまうと縦のスクロールバーがでなくなってしまうのでご注意です。

body {
    position: relative;
	left: 0;
	overflow-x: hidden;
}

次に、スライドインするメニューに以下のように指定します。

#slide_menu{
	position: fixed;
	top: 0;
	left: -240px;
	width: 240px;
	height: 100%;
    background: #E87272;
}

position を fixed; にして位置を固定します。left に メニューの横幅のマイナス値を設定し、画面左端よりも左にはみだした位置にし画面から見えないようにします。 あとは、height を 100%; にし画面縦幅いっぱいをメニューのエリアにします。

jQuery コード

jQuery 本体と以下のコードを読み込みます。4行目には、スライドインするメニューのセレクタを指定し、5行目にはクリックするボタンを指定して下さい。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
var menu = $('#slide_menu'), // スライドインするメニューを指定
	menuBtn = $('#button'), // メニューボタンを指定
	body = $(document.body), 	
    menuWidth = menu.outerWidth();	            
	
	// メニューボタンをクリックした時の動き
    menuBtn.on('click', function(){
    // body に open クラスを付与する
	body.toggleClass('open');
        if(body.hasClass('open')){
        	// open クラスが body についていたらメニューをスライドインする
			body.animate({'left' : menuWidth }, 300);			
			menu.animate({'left' : 0 }, 300);					
		} else {
			// open クラスが body についていなかったらスライドアウトする
			menu.animate({'left' : -menuWidth }, 300);
			body.animate({'left' : 0 }, 300);			
		}		     
    });
});    
</script>

ボタンをクリックする毎に、body 要素に open というクラスが付与と削除を交互に繰り返します。この open クラスが付いている時にメニューを表示し、付いていなかったら非表示にするということを行っています。

クリック時に open クラスが付いていたら、CSS 側で隠していたメニューを画面左端に位置を変更して表示し、open クラスが付いていなかったら、再び画面左端よりも左にメニュー位置を変更し非表示にします。

この位置の移動を animate メソッドでアニメーションにして完成です。

もし、右からスライドインさせたい場合は position 位置を right に変更すればよいだけなのでアレンジも簡単です。

全てのコードは、こちら(HTML/JS)「SlideIn_Menu/index.html at master · SaoriMiyazaki/SlideIn_Menu」とこちら(CSS)「SlideIn_Menu/style.css at master · SaoriMiyazaki/SlideIn_Menu」でご確認頂けます。

メニューをスライドインした時に縦のスクロールが可能なサンプル ※2015/10/17 追記

コメントやお問い合わせなどで聞かれることが多かったので、メニューをスライドインした際に、メニューとコンテンツ部分の縦スクロールが可能なバージョンのサンプルを作成しました。メニューの数が多い場合にメニューが切れることがありません。

ダウンロード

以下より縦スクロール可能なバージョンのサンプルをダウンロードできます。

SaoriMiyazaki/SlideIn_Menu at scroll_container

サンプルデモ

デモは以下です。
横からスライドインするメニュー(スクロール可能版)demo|memocarilog

メニューが開いている時にコンテンツ部分をクリックしても閉じることができるようにする ※2015/5/15 追記

コメントにてご質問頂いたので、以下追記しました。

上記サンプルでは、メニューボタンのみが閉じる動作のトリガーとなっています。これをコンテンツ部分をクリックしても閉じることが可能にします。

HTML コード

まず、HTML のどこかに div.layer を追加します。

<body>
<div class="layer"></div>
<div class="container">
:
略
:

CSS コード

追加した div.layer の width と height を100%にして画面いっぱいの領域に広げ、通常時は display:none にして非表示にしておきます。#slide_menu に z-index: 3; #button に z-index: 2; .layer に z-index: 1;の順に重なる指定をします。

.layer{
    position: fixed;
    top: 0;
    z-index: 1;
    display: none;
    width: 100%;
    height: 100%;
    background-color: transparent;
}
body.open{
    position: fixed;
}

body に open クラスが付与されているとき(メニューオープン時)には、body に position: fixed を指定して固定します。

jQuery コード

jQuery を以下のようにします。

$(function(){
var menu = $('#slide_menu'),
    menuBtn = $('#button'),
    body = $(document.body),
    // .layer もオブジェクト化	
    layer = $('.layer'),
    menuWidth = menu.outerWidth();	            
        
    menuBtn.on('click', function(){
	body.toggleClass('open');
        if(body.hasClass('open')){
            // css で非表示にしていた .layer を表示
            $(".layer").show();
            body.animate({'left' : menuWidth }, 300);
            menu.animate({'left' : 0 }, 300);					
        } else {
            // .layer を非表示
            $(".layer").hide();
            menu.animate({'left' : -menuWidth }, 300);
            body.animate({'left' : 0 }, 300);			
        }		     
    });
    // .layer をクリック時にもメニューを閉じる
    layer.on('click', function(){
            menu.animate({'left' : -menuWidth }, 300);
            body.animate({'left' : 0 }, 300).removeClass('open');
            layer.hide();
    });
});   

メニューをクリックした時に先ほど追加した .layer を表示させます。そして .layer をクリック時にもメニューを閉じるようクリックイベントを追加し、メニューを閉じると同時に .layer を再び非表示にします。

Related Article

27 Comments & Tracbacks

  • sharon apple 2014-11-14 11:13 AM

    簡単に実装できました。ありがとうございます。
    一点だけ、スマホで動作確認するとメニュー部分とボディが動いてしまいます。
    例えば、FACEBOOKのメニューのような横は固定されて縦スクロールだけ動くようにする事は可能でしょうか?

    Reply

    • saori 2014-11-14 11:39 AM

      sharon apple さま

      ご参考ありがとうございます。
      もし、body 部分を同時にスライドさせたくないということなら、jQuery コード内にある body.animate({ … という2行を削除して頂ければメニュー部分だけが橫スライドするようになります。

      Reply

  • sharon apple 2014-11-15 9:45 AM

    ご教授いただいたやり方を試してみましたがbodyがスライドしないでメニューのみがスライドしてbodyと重なってしまいました。ちょっとイメージしている動きとは違いました。
    本当にFACEBOOKまんまの動きなんですが・・・
    bodyとメニューが一緒にスライドして固定される感じです。でも縦スクロールだけは出来るみたいな・・・

    作者のソースに

    body.animate({‘left’ : menuWidth }, 300);
    menu.animate({‘left’ : 0 }, 300);
    body.addClass(‘bfixed’); ←追加

    .fixed{position:fixed;top:0;left:240px;}

    このように追加して縦スクロールは出来ませんが何とか近い動きになりました。

    ありがとうございます。

    今後もいろいろと参考にさせていただきます。

    Reply

  • winballot 2015-07-21 10:53 AM

    この記事のおかげで、横からスツと出てくるスライドメニューを実装することができ、大変ありがとうございました。

    メニュー部分がスクロールできないことで難航していましたが、
    「 menu.animate({‘left’ : 0 }, 300); の行をを menu.animate({‘left’ : -240 }, 300); に変更し、#slide_menu の CSS の position を absolute へ変更、height を auto へ変更」

    すると、コメント欄の助言で無事スクロールできるようになりました。

    できれば、body部分は動かさずに、スライドメニュー部分だけスクロールしたいのですが、そのようにもできるのでしょうか?

    できるのであれば、ご教示くださるとありがたいです。

    Reply

    • saori 2015-07-24 9:12 AM

      winballot さま

      ご参考ありがとうございます。
      仰っている動作も実装可能ではないかと思います。

      実際にコードを書いて動作を確認してみないとわからないところがございますので、
      時間がある時に、そういった動きのサンプルも追記できたらよいなと思います。

      Reply

    • Midge 2016-07-20 6:24 PM

      You’ve really imsespred me with that answer!

      Reply

  • izanami 2015-08-27 7:34 PM

    スマホサイトでjQueryMobileのスワイプメニューが使用できないサイト環境で、困っていたところに、こちらを見つけて活用させていただきました。ありがとうございますm(__)m

    1点だけ、メニューをスクロールさせるために、上記の変更をしたところ、iPhone Safariで、メニューが非表示にならない、という現象がありました。
    なかなか解決策がみつからなかったため、どなたかの参考になればと思い、コメントさせていただきます。

    cssに下記の2行を追加で、バッチリでした。

    html{overflow-x: hidden;position: relative;}
    html body.open{overflow-x: visible;}

    Reply

    • saori 2015-08-28 1:04 PM

      izanami さま

      ご参考ありがとうございます。
      また、CSS のご指摘もありがとうございました!

      Reply

  • kei 2015-09-16 1:23 PM

    ありがとうございます。上手く実装できたのですが…

    PCだと何もないのですが、スマホ(iphone)だとボタン押して動作後戻ると、コンテンツの文字が大きくなってしまいました。(font-sizeの指定が無視されました)

    おそらく、左のメニューが出た部分がそのまま範囲として認識されてしまっているからかと、思いますが何か良い解決策とかありますでしょうか?

    Reply

    • kei 2015-09-17 10:14 AM

      追加ですが…原因は

      body.open{
      position: fixed;
      }

      でした。これが原因でテキストの文字サイズが無視されました。何か良い方法ありますか?

      Reply

      • saori 2015-09-17 3:28 PM

        kei さま

        全てのコードをみていないのでなんとも言えませんが、position: fixed; が原因でテキストの文字サイズへ影響を与えているとは考えにくい気がします…、body.open に何かフォントサイズの指定を入れているのでしょうか?それならば、通常の body に通常時のフォントサイズを入れておけばよさそうかなと思いますがいかがでしょうか。

        Reply

    • Nelle 2016-07-20 6:44 PM

      You’ve maaegnd a first class post

      Reply

    • Dobry den prosim o pomoc v exekuci ve čtvrtek 6.12.2012 k nam maji dorazit exekutoÅ™i mam 4 dÄ›ti tohle bych fakt asi nepÅ™ežila prosim o pujceni 20tisic korun na 1 rok 607991014

      Reply

  • junemiyo 2016-05-28 4:19 PM

    こんにちは、アコーディオンメニューで悩んでいるときに、このページはとても参考になり、助かりました。
    初心者なので、自分で考えて実装することが出来ないので質問お願いしても宜しいでしょうか?

    アコーディオンメニューが開いている時にメニューに閉じるボタンを付けたいのですが
    どうしたいいかわかりません。

    http://eduardomb.github.io/jquery-panelslider/
    上記のページの「Open right panel」にしたときの「Close」ボタンをアコーディオンメニューの頭につけたいのです。

    急ぎではないので、お手すきの時にご教授頂けますでしょうか?

    Reply

    • saori 2016-05-30 9:31 PM

      junemiyo さま

      クローズボタンをつけたバージョンが以下になります。ご参考になれば幸いです。

      SlideIn_Menu/index.html at close_btn · SaoriMiyazaki/SlideIn_Menu

      HTML へクローズボタンを追加し、jQuery側でそのボタンをクリックした場合にメニューを閉じる処理を行っています。30行目以降をご確認いただければと思います。

      Reply

    • Ally 2016-07-20 6:20 PM

      Aretlcis like this just make me want to visit your website even more.

      Reply

  • ゆきち 2016-08-22 4:28 PM

    いつも参考にさせていただいております。
    ありがとうございます。

    ただの任意のテキストをクリックすればメニューが出るようにしたいのですが、
    どうすればよろしいのでしょうか??

    aの中に記述するだけで機能するように等はできないものでしょうか。

    Reply

    • saori 2016-09-02 9:03 AM
      <button id="button"><i class="fa fa-bars"></i> Menu</button>

      の部分を a タグに変更して id を button としていただければ大丈夫だと思います。

      Reply

  • kouya 2016-09-19 4:14 PM

    昨日こちらのサイトにたどり着きました。
    他のサイトのdrawer-menu(ハンバガーメニュー)よりもわかりやすく参考になりました。
    これからいつになるかわかりませんが、可変をして使わせていただきたいと思います。
    これからも貴サイトを参考にさせていただきます。
    ありがとうございました。

    64歳の老人より

    Reply

    • saori 2016-09-20 6:27 AM

      kouya さま
      コメントありがとうございます!励みになります。記事がご参考になれば幸いです。

      Reply

  • ヤマっち 2016-09-22 7:38 AM

    ありがとうございます。
    このサイトのお陰でスライドメニューが作れました。

    ただひとつ質問なのですが、
    今ランディングページをつくっているのですがハッシュリンク#リンクが使えません。

    Reply

    • saori 2016-09-22 8:17 AM

      ヤマっち さま
      その要素へ #button という ID を使用されていませんか?
      もしくはその他のクリックイベントが発生するスクリプトと干渉していませんか?

      Reply

  • かず 2016-11-04 2:23 AM

    先日こちらの記事を拝見させて頂き、おかげでスライドメニューの実装が出来ました。ありがとうございます。

    ところで、スクロール時に画面上部にメニューを固定表示するべく、
    #slide_menuの親要素にposition:fixed;を指定すると、
    スクロール発生時にスライドメニューの表示が壊れてしまいます。

    色々と試しているのですがまだ正解に辿り着けなく難儀しております。
    もしよろしければ何かアドバイス頂けましたら幸いです。

    Reply

    • saori 2016-12-02 10:37 AM

      ご参考いただきありがとうございます。
      返信が遅くなり申し訳ありません。

      メニュー自体は fixed されているので、ボタンの方のみ fixed してみるのはどうでしょうか?

      Reply

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー jQueryプラグイン スライドショー トラブル コードサンプル コンテンツ Facebook 素材 php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ レスポンシブ Photoshop seo Macアプリ サイドバー タクソノミー HTML5 WPセキュリティ Git カスタムメニュー ナビゲーション PHPリファレンス SVG API query_posts RSS WP使い方 iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass moreタグ