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

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

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

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

サンプルページ ソースダウンロード(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

「たった10行でできる!ドロワーメニューの作り方」への29件のフィードバック

  1. ドロワ―が出現した時に右にスペースが出来てしまってますが、なくなりませんか?

    1. 修正をしましたが、スタイルはカスタマイズしていただくことが前提ですので、よろしくお願いします〜(^^ゞ

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

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

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

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

    1. ケン様

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

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

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

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

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

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

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

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

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

    1. 勉強中 様

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

      よろしくお願いします。

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

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

    1. ちよじ様

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

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

    1. けんと様

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

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

    1. お返事しておらず、申し訳ありません。
      CSSにて、.drawr要素に「overflow-y: scroll;」を追加してみてください。
      よろしくお願いします。

      1. CSSにて、.drawr要素に「overflow-y: scroll;」を追加??
        ド素人には全く意味ワカラン・・・お手上げっス\(´;ω;`)/

  10. スマホ用に使いたいのですが、[三]や[×]の位置を変更するにはどうしたらよいのでしょうか?
    左端を0pxとすると横方向へ350px辺りがいいのですが…
    素人ですみません。

    1. CSSの
      「.btn」要素内にある「right:20px;」を「left:20px;」に変更
      「.drawr」要素ないにある「right:0;」を「left:0;」に変更
      上記の変更を試してみてください。

  11. こんにちは、お世話になります。
    サンプルページで表示されるのと違い、ダウンロードしたソースをそのまま使うと、
    ・メニュー1
    ・メニュー2
    ・メニュー3

    とメニュー群の頭に黒い”・”が表示されます。これを消すにはどうしたらよいのでしょうか?
    それとそのメニュー群の表示位置をより左へ寄せて表示するにはどうしたらよいのでしょうか?
    試しに #menu li a{~} 内の padding: の数値を全部0pxに変えてみましたが、それでは全然左へは寄らないのですね・・・
    ってそんな程度の初心者ですみませんが、ぜひともお助けください!!

    1. 申し訳ありませんが、ダウンロードして頂いてそのまま使用される想定で提供していませんので、ご了承ください。
      「・」はhtmlの仕様ですので、CSSでスタイルを変更してご利用ください。
      ulタグ、liタグのlist-styleで変更できます。

      参考の記事↓
      【ホームページ作成 – リストのマークを表示しない】
      http://www.1uphp.com/con1/list/style-none.html

  12. どのサイトに載ってるドロワーメニューも表示しているウィンドウ(ブラウザ)に対して位置が決まっているので、ブラウザ(ウィンドウ)の幅を変えると≡メニューの位置はウィンドウに対して固定なので、表示されているホームページ自体からしたら位置が変わってしまいます。それだと幅が決まっているホームページの場合変な位置に≡メニューがくることになります。例えばこの「やってみたら、できた。」のページも中央に寄せた幅の決まったページなので、ブラウザを極端に広げてみれば端っこのほうに≡メニューがきて、バランス的にもおかしくなると思いませんか?
    そこで、ウィンドウの幅に合わせるのではなく、ホームページの表(~</tabel)内に合わせて表示するようにはできませんか?
    やはり難しいですかね?あぁ、できたらいいなあ~

    1. tableタグ内に合わせて…というのはお勧めしませんが、divタグの中にtableタグとdrawrメニューを入れて、divタグにcssでposition:relativeを設定すれば可能です。

      div(position:relative、横幅も設定)
      drawr
      table
      〜div

      ただ、ウィンドウ幅を極端に広げるような状況が一般的にはないと思うので、通常はウィンドウ幅に合わせるのが主流だと思いますが…。

コメントを残す

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

CAPTCHA