スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」

Drawer Slide Menu | jQuery plugin for responsive menu

Facebookなどスマホページでメニューアイコンをクリックすると、横からメニューがにゅるっと出てくるのがあります。これをドロワー(ナビゲーションドロワー)というそうです。

drawerというのは、英語で引き出しという意味。意味をきくと納得ですね〜。

そのドロワーを簡単に実装できるのがこのjQueryプラグイン「Drawer Slide Menu」です。設置の仕方も簡単です。

サンプルを作りましたので、ご覧いただけるとわかりやすいと思います。スマホからもPCからも動作が確認できます。

⇒ スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」サンプル

使い方も簡単。すぐに使えて動作も快適です。jQueryプラグイン「Drawer Slide Menu」の使い方は続きをご覧下さい。

【使用方法】
まずはこちらのサイトから一式ダウンロードしてきます。

HTMLのヘッダー部分に次のように記述します。

<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../jquery.mobile-menu.js"></script>
<script>
	$(function(){
		$("body").mobile_menu({
		    menu: ['#main-nav ul', '#secondary-nav ul'],
		    menu_width: 200,
		    prepend_button_to: '#mobile-bar'
		});
	});
</script>

$(function(){

$("body").mobile_menu({

menu: ['#main-nav ul', '#secondary-nav ul'],

menu_width: 200,

prepend_button_to: '#mobile-bar'

});

</script>

続いて＜Body＞部分に、次のように記述すれば完成です。

<nav id="mobile-bar"></nav>

<nav id="main-nav">
	<ul>
		<li><a href="#">ホーム</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>
		<li><a href="#">メニュー 6</a></li>
	</ul>
</nav>

<nav id="secondary-nav">
	<ul>
		<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>
		<li><a href="#">カテゴリー 6</a></li>
	</ul>
</nav>

<ul>

</ul>

</nav>

<ul>

<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>

<li><a href="#">カテゴリー 6</a></li>

</ul>

</nav>

また、オプションでは以下のようなことを指定することができます。

menu_width: モバイルメニューの幅を指定。

menu_id: Menu IDです。デフォルトでは ‘mobile-nav’。

button_content: 開閉ボタンのコンテンツを指定。デフォルトでは‘MENU’。

prepend_button_to: 開閉ボタンを表示する要素を指定。

ちなみに次のように指定します。このように書けば開閉ボタンに画像も設定できるようです。

  <script>
    $(function(){
      $("body").mobile_menu({
        menu: ['#main-nav ul'],
        menu_width: 200,
        prepend_button_to: '.menu',
        button_content: '<img src="images/common/img_ico_menu.png">',
      });
    });
  </script>

$(function(){

$("body").mobile_menu({

menu: ['#main-nav ul'],

menu_width: 200,

prepend_button_to: '.menu',

button_content: '<img src="images/common/img_ico_menu.png">',

});

</script>

サクっとナビゲーションドロワーが実装できるので、とても便利かと思います。

最後にサンプルのソースを書いておきます。どうぞご参考まで。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」サンプル</title>
        
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../jquery.mobile-menu.js"></script>
<script>
	$(function(){
		$("body").mobile_menu({
			menu: ['#main-nav ul', '#secondary-nav ul'],
			menu_width: 200,
			prepend_button_to: '#mobile-bar'
		});
	});
</script>
	</head>
	<body>
		<header>
			<nav id="mobile-bar"></nav>

			<nav id="main-nav">
				<ul>
					<li><a href="#">ホーム</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>
					<li><a href="#">メニュー 6</a></li>
				</ul>
			</nav>

			<nav id="secondary-nav">
				<ul>
					<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>
					<li><a href="#">カテゴリー 6</a></li>
				</ul>
			</nav>
			<h1>スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」サンプル</h1>
			<p>MENUボタンを押してみて下さい。横からメニューが現れます。</p>
		</header>	
		
	</body>
</html>

<!DOCTYPE html>

<head>

<title>スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」サンプル</title>

$(function(){

$("body").mobile_menu({

menu: ['#main-nav ul', '#secondary-nav ul'],

menu_width: 200,

prepend_button_to: '#mobile-bar'

});

</script>

</head>

<body>

<ul>

</ul>

</nav>

<ul>

<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>

<li><a href="#">カテゴリー 6</a></li>

</ul>

</nav>

<h1>スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」サンプル</h1>

<p>MENUボタンを押してみて下さい。横からメニューが現れます。</p>

</header>

</body>

</html>

あわせてお読みください

クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』

今回は、クリックすると上から降りてくるドロップダウンメニューのソースを紹介します。サンプルをみてもらうとわかりやすいと思います。 →「クリックするとメニューが…

クリックすると横からメニューが現れるjQueryプラグイン『Sidr』

Sidr スマホのサイトでボタンやリンクをタップすると隠れていたメニューが横から現れるというのがよく使われます。 FacebookのページやYouTubeでも…

ネットショップに最適。目を引くクールな商品スライダー「Simple Multi-Item Slider 」

ネットショップでアイテム紹介に使える商品スライダーのソースを紹介します。CSSとjQueryを使用してあります。シンプルかつ、モダンなインパクトのあるアイテム…

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」

⇒ スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」サンプル

あわせてお読みください

コメントを残すコメントをキャンセル

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

人気記事ランキング

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」

⇒ スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」サンプル

あわせてお読みください

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル