2014/03/18

jQuery Mobileを使ったスマホサイト用メニューの作り方

jQuery Mobileを使ったスマホサイト用メニューの作り方

スマホサイトを作成する際に,メニューの表示方法に苦労する場合が多いかと思います.

そこで今回はjQueryMobileを利用し,スマホのFacebookアプリのようなメニュー機能を作成する方法を紹介します.

目次

jQuery Mobileの使い方

まず,jQuery Mobileを使用するためには,jQuery本体が必要になるので,jquery.comからjQuery本体をダウンロードして下さい.

さらにjQuery Mobileをjquerymobile.comからダウンロードします.今回使用するjQuery Mobile本体とCSSファイルはダウンロードしたファイル群の中に入っています.

基本的には以下のように3つのファイルを読み込むだけで使用可能になります.

<link rel="stylesheet" href="jquery.mobile-1.4.2.css">
<script src="jquery-1.11.0.js"></script>
<script src="jquery.mobile-1.4.2.js"></script>

そして,文書の表示領域を設定するために,以下の一文をヘッダに追加します.

<meta name="viewport" content="width=device-width,initial-scale=1">

以上で準備は完了となります.

メニューの実装方法

開くメニュー部分に対応する要素を作成するには

<div data-role="panel" id="panelmenu">開くメニュー部分はこちら</div>

と作成します.div要素のカスタムデータ属性であるdata-roleに"panel"と指定し,idを設定します.

そして,メニューを開くためのリンクを作成します.

<div data-role="content">
  <a href="#panelmenu">タッチ</a>
</div>

コンテンツを表すためのdiv要素のdata-roleに"content"を指定し,その内部にメニューを開くためのリンクを作成します.

リンク先を先ほど設定したid名にすることで,以下の画像のようなリンクをタップした際にメニューが出現します.

メニュー出現後は以下の画像になります

なお,この場合メニューは左側に出現しますが,右側に出現させたい場合は

<div data-role="panel" data-position="right" id="panelmenu">開くメニュー部分はこちら</div>

というように,メニュー部分のdiv要素のdata-position属性に"right"を指定してください.

まとめ

jQuery Mobileを使用すると簡単にメニューが実装でき,サイト構築の効率アップが図れます.

他にも様々な機能があるので,スマホサイトを作成する際に導入してみてはいかがでしょうか.