たった10行でできる!ドロワーメニューの作り方

sponsored link

今流行のドロワーメニュー。ハンバーガーマークを押したらニョキッと出てきてバッテンを押したらニョキッといなくなるやつです。

ソースはたくさん落ちていて、それ使っても良かったんですが軽量にしたかったのと、あまり機能もいらなかったので自分で書いてみました。

コンテンツ部分がグインっと動いたりしません。コンテンツにメニューがかぶさるだけです。

サンプルページ ソースダウンロード(ZIP)

※今回紹介するソースではWindowの右から出てきます。

スクリプト

使うのはこの10行。
※jQueryを読み込んでおいてくださいね。

2018.04.13追記
・領域外をクリックでメニューを閉じるようにしました。
・連打してもアニメーションしないようにしました。
$(function($) {
	WindowHeight = $(window).height();
	$('.drawr').css('height', WindowHeight); //メニューをwindowの高さいっぱいにする
	
	$(document).ready(function() {
		$('.btn').click(function(){ //クリックしたら
      if($('.drawr').is(":animated")){
        return false;
      }else{
        $('.drawr').animate({width:'toggle'}); //animateで表示・非表示
        $(this).toggleClass('peke'); //toggleでクラス追加・削除
        return false;
      }
		});
	});
  
  //別領域をクリックでメニューを閉じる
  $(document).click(function(event) {
    if (!$(event.target).closest('.drawr').length) {
      $('.btn').removeClass('peke');
      $('.drawr').hide();
    }
  });
  
});

三ボタンをクリックするとメニューが開き、三ボタンが×(classにpekeがつく)に変わります。
×ボタンクリックすると×メニューが閉じ、×ボタンが三ボタン(classのpekeが削除される)に変わります。

HTML

drawrの中身はなんでもいいです。drawrの中に書いたものがニョキッと出てきます。

<a class="btn"></a>
<div class="drawr">
	<ul id="menu">
	<li><a href="#">メニュー1</a></li>
	<li><a href="#">メニュー2</a></li>
	<li><a href="#">メニュー3</a></li>
	<li><a href="#">メニュー4</a></li>
	<li><a href="#">メニュー5</a></li>
	</ul>
</div>

CSS

ここで必要なのは、下図のような画像を使ってメニューを開いていない時と開いている時でボタンの表示を変えること。
btn
そして、drawr部分は最初にdisplay:noneを指定しておき、隠しておくことです。

.btn {
	background:transparent url(btn.png) no-repeat 0 0;
	display: block;
	width:35px;
	height: 35px;
	position: absolute;
	top:20px;
	right:20px;
	cursor: pointer;
	z-index: 200;
}
.peke {
	background-position: -35px 0;
}
.drawr {
	display: none;
	background-color:rgba(0,0,0,0.6);
	position: absolute;
	top: 0px;
	right:0;
	width:260px;
	padding:60px 0 20px 20px;
	z-index: 100;
}
#menu li {
	width:260px;
}
#menu li a {
	color:#fff;
	display: block;
	padding: 15px;
}

本当に簡単に作っただけなのであしからず!!
ちなみにボタン画像は漢数字「三」とバツ「×」で作った適当なものなのでそのまま使っちゃいけませんよw

sponsored link

21 thoughts to “たった10行でできる!ドロワーメニューの作り方”

  1. はじめまして。
    シンプルで設置しやすいドロワーメニュー、ありがとうございます。
    現在wordpressにて初めてモバイルテーマを作成しているのですが、
    フロントページ以外では、クリックしてもドロワーが開きません。
    フロントページではちゃんと動作するのですが…
    不躾で申し訳ありませんが、何か原因が考えられるでしょうか。
    よろしくお願いいたします。

      1. わざわざありがとうございます。返信が遅くなってしまい、申し訳ございません。
        解決したようで、安心しました。

  2. NARUGAROさん
    とてもわかりやすいスクリプトありがとうございます。
    これ、ページ内リンクでメニューをクリックした時に、ドロワーを閉じるにはどのようにしたらよいでしょう(;_;)

    いろいろ試したのですができなくて・・・
    よろしくお願い申し上げます。

    1. ケン様

      コメントありがとうございます。
      ちょっとスクリプトを足してみました↓
      https://www.narugaro.com/drawr-menu/sample.html

      ページ内リンクが、ドロワーメニューの中にあるなら上の「$(‘#menu li a’).on(‘click’, function(){〜」を使用してください。
      コンテンツ内にある場合は、そのリンクにclass(この例ではankerとしています)を付与して、「$(‘.anker’).on(‘click’, function(){〜」を使用してください。

      1. ちゃんなるさ~ん!
        ありがとうございま~す!
        できましたよ~~
        ホントに助かりました!!!

  3. ちゃんなるさま
    シンプルなスクリプトとわかりやすい説明、どうもありがとうございます。
    活用させて頂きたいのですが、メニュー以外の領域をタップ、クリックしてドロワーを閉じるようにする方法をご教授頂けますでしょうか、どうぞ宜しくお願いいたします。

    1. しし丸様
      お返事が遅くなってしまってすみません。
      下記でイケルと思います!サンプルページも書き換えているので、参考にしてください。

      $(document).click(function() {
      $(‘.btn’).click();
      });

      1. すみません、こちらでお願いします!
        $(document).click(function(event) {
        if (!$(event.target).closest(‘.drawr’).length) {
        $(‘.drawr’).hide();
        }
        });

  4. 質問なのですが、
    ボタンを連打した際のアニメーションをストップしたいのですが、うまくできません。
    何か方法ございませんか?

  5. すごくシンプルでぜひ実装させていただきたいと思いました。
    自分では書けないのでお願いしたいのですが、左から出てくるものも作っていただけたら嬉しいです。
    また、多階層になった場合はどんな動きになりますでしょうか?
    よろしくお願いいたします。

    1. 勉強中 様

      コメントありがとうございます。
      左から出てくるようにするには、cssの9行目と20行目の「right」を「left」に変更すれば可能だと思います。
      多階層は今のところ考えていません。

      よろしくお願いします。

  6. ちゃんなる様
    スクリプトありがとうございます。
    ひとつ質問です。勉強不足、説明不足でしたら申し訳ございません。

    ドロワーボタン「三」をクリックし、ドロワーを表示。その際、切り替わった表示「×」で閉じず、
    領域外をクリックしドロワーを非表示にした際、
    ボタンが「×」のままになっています。
    これを「三」に表示させる方法というものはないのでしょうか。

    1. ちよじ様

      コメントありがとうございます。
      確かに、別領域をクリックして閉じた場合に「三」が「×」のままになっていましたね。
      ご指摘ありがとうございます。
      スクリプト下側の別領域クリックでメニューを閉じる部分に、「$(‘.btn’).removeClass(‘peke’);」を追記で対応可能です。

  7. HTMLとCSSを始めたばかりでJSは全くわかりませんが、このメニューを使いたいです。メニューが多い場合、背景がウィンドウの高さでなく、コンテンツ全体まで伸ばすには、どこを変えたらよいのでしょうか?

    1. けんと様

      お返事が遅くなってすみません!
      メニューが多い場合は、スクリプトの2,3行目を削除すれば良いかもしれません。
      ↓これを削除
      WindowHeight = $(window).height();
      $(‘.drawr’).css(‘height’, WindowHeight); //メニューをwindowの高さいっぱいにする

  8. ドロワーメニューのソースを利用して作っているのですが、
    メニュー項目が17行ほどあり、はみ出してしまいます。
    これは対応策無いでしょうか。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA