Webデザイナーブログから学ぶホームページ制作

jQuery mobileではタイトル領域やメニュー領域をタップするとコンテンツが開く開閉メニューが簡単な指定で設置することができます。
html + cssの設定とは全く異なる指定方法ではありますが、指定方法がわかるようになると簡単です。

jQuery Mobileを利用して開閉メニューを設定する方法を解説します。

コンテンツが開く開閉メニューを配置したい場合は、「Collapsible」要素を指定して配置します。
開閉メニューリストをグループ化して配置したい場合は、「Collapsibleset」ウィジェットを指定して配置します。

<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>

※「data-collapsed=”false”」属性で指定すればアクセスした時点で最初から開いている状態になります。

<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>開閉メニューをクリック</h3>
<p>こちらの枠にコンテンツ内容や説明等を入力します。</p>
</div>
<div data-role="collapsible">
<h3>開閉メニューをクリック</h3>
<p>こちらの枠にコンテンツ内容や説明等を入力します。</p>
</div>
<div data-role="collapsible">
<h3>開閉メニューをクリック</h3>
<p>こちらの枠にコンテンツ内容や説明等を入力します。</p>
</div>
</div>

<div data-role="collapsible-set">
<div data-role="collapsible" data-theme="b">
<h3>開閉メニューをクリック</h3>
<p>こちらの枠にコンテンツ内容や説明等を入力します。</p>
</div>
<div data-role="collapsible" data-theme="b">
<h3>開閉メニューをクリック</h3>
<p>こちらの枠にコンテンツ内容や説明等を入力します。</p>
</div>
<div data-role="collapsible" data-theme="b">
<h3>開閉メニューをクリック</h3>
<p>こちらの枠にコンテンツ内容や説明等を入力します。</p>
</div>
</div>

実装サンプルを作りましたのでこちらでも確認してみてください。
ヘッダーとフッターサンプル

開閉メニューリストを配置し、デフォルトではアイコンが設定されています。アイコンを変更する場合は「data-collapsed-icon」と「data-expanded-icon」パラメーターを利用してアイコンを指定します。

<div data-role="collapsible-set" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<div data-role="collapsible" data-collapsed="false">
<h3>開閉メニューをクリック</h3>
<p>こちらの枠にコンテンツ内容や説明等を入力します。</p>
</div>
<div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
<h3>開閉メニューをクリック</h3>
<p>こちらの枠にコンテンツ内容や説明等を入力します。</p>
</div>
<div data-role="collapsible">
<h3>開閉メニューをクリック</h3>
<p>こちらの枠にコンテンツ内容や説明等を入力します。</p>
</div>
</div>

実装サンプルを作りましたのでこちらでも確認してみてください。
ヘッダーとフッターサンプル

Collapsiblesetウィジェットに付随して利用可能なパラメーター一覧をご紹介します。

クラスも指定要素も簡単に設置できるのが良いですね。
cssを自分で書いたりjavascriptを設定することもないので簡単に開閉メニューが設置できます。