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

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

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

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

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

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

スクリプト

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

$(function($) {
	WindowHeight = $(window).height();
	$('.drawr').css('height', WindowHeight); //メニューをWindowの高さいっぱいにする
	$(document).ready(function() {
		$('.btn').click(function(){ //クリックしたら
			$('.drawr').animate({width:'toggle'}); //animateで表示・非表示
			$(this).toggleClass('peke'); //toggleでクラス追加・削除
		});
	});
});

三ボタンをクリックするとメニューが開き、三ボタンが×(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

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

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

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

コメントを残す

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