jquery mobile 1.4ならFacebookみたいなスライドメニューも超簡単

jquery mobile 1.3から導入されたdata-role=”panel”を使えば、Facebookみたいなボタンをタップするとコンテンツがスライドするようなメニューも超簡単に作ることが可能。

最新版のjquery 2.1.0とmobile 1.4.2を使って、Facebookみたいなメニューを実現する方法は以下。

まずはhead内でcssとjavascriptを読み込む

CSS

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />

JAVASCRIPT

<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

jquery mobileではbody内にdata-roleとしてパーツを配置していくのがお約束

HTML

まずは全体をdata-role=”page”で囲む

<div data-role="page">
	〜
</div><!-- /page -->

この中にパーツを配置

ヘッダー部分はdata-role=”header”
メニュー用のボタンを配置しておく

<div data-role="header">
	<a href="#navPanel">Menu</a>
	<h1><a href="#">HEADER</a></h1>
</div><!-- /header -->

メインの本文はdata-role=”content”

<div data-role="content">
	〜
</div><!-- /content -->

メニューはdata-role=”panel”

このid=”navPanel”とヘッダーで指定しているhref=”#navPanel”が対になるようにする

メニューはリスト表示ul data-role=”listview”

<div data-role="panel" id="navPanel">
	<ul data-role="listview">
		<li><a href="#">ホーム</a></li>
		<li><a href="#">人気記事</a></li>
		<li><a href="#">カテゴリー</a></li>
		<li><a href="#">タグ一覧</a></li>
		<li><a href="#">検索</a></li>
		<li><a href="#">リンク</a></li>
	</ul>
</div>

上記の各パーツを全て配置すると以下のようになる

<body>
<div data-role="page">
<div data-role="header">
	<a href="#navPanel">Menu</a>
	<h1><a href="#">HEADER</a></h1>
</div><!-- /header -->
<div data-role="content">
	本文
</div><!-- /content -->
<div data-role="panel" id="navPanel">
	<ul data-role="listview">
		<li><a href="#">メニュー1</a></li>
		<li><a href="#">メニュー2</a></li>
		<li><a href="#">メニュー3</a></li>
	</ul>
</div>
</div><!-- /page -->
</body>

わずかこれだけのコードでFacebookのようなスライドメニューが実現できるのがjquery mobileの強み。
私製のcssやjavascriptに時間を費やすことなく、有効に使うことをおススメする。

CSS

JAVASCRIPT

HTML

Related posts: