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

jQuery mobileではグローバルナビゲーションやメニュー一覧など、簡単な指定で設置することができます。 html + cssの設定とは全く異なる指定方法ではありますが、指定方法がわかるようになると簡単です。

jQuery Mobileを利用してグローバルナビゲーションを設定する方法を解説します。

グロバールナビゲーションは複数のボタンをグループ化してナビゲーションとして横並びや縦並びに配置します。 コンテナとなる「div」要素にデータ属性「data-role=”navbar”」を指定し、「ul」要素で設定したリンクリストを配置します。
ナビゲーションの要素内では、ボタンに「class=”ui-btn”」などの指定をしなくても自動的にボタンとして配置されます。
ページロード時にアクティブにしたい場合には、ボタンには「ui-btn-active」クラスを付加します。

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

※ボタンが5個までは横に並びますが、6個以上になると2列に固定されます。

<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="#">PRICE</a></li>
<li><a href="#">COMPANY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>

※ヘッダーとフッター内にナビゲーションを配置すると2列にならずに横並びに設定されます。

<div data-role="header">
<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="#">PRICE</a></li>
<li><a href="#">COMPANY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>

※ボタンにアイコンを指定するには、データ属性「data-icon」、「ui-icon」クラスで指定します。
※アイコンの表示位置はコンテナ要素に「data-iconpos」属性を指定します。

<div data-role="navbar" data-iconpos="top">
<ul>
<li><a href="#" data-icon="home" class="ui-btn-active">HOME</a></li>
<li><a href="#" data-icon="user">プロフィール</a></li>
<li><a href="#" data-icon="mail">問い合わせ</a></li>
</ul>
</div>

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

ナビゲーションの背色や文字色を変更するにはjQuery mobile用のテーマ（スウォッチ）の要素を指定します。
テーマを設定する場合は、「ui-body-[a-z]」クラスを付与します。

<div data-role="navbar" data-iconpos="top">
<ul class="ui-body-b">
<li><a href="#" data-icon="home" class="ui-btn-active">ホーム</a></li>
<li><a href="#" data-icon="user">プロフィール</a></li>
<li><a href="#" data-icon="mail">問い合わせ</a></li>
</ul>
</div>

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

ヘッダーとフッターに配置したボタンに指定するクラスと要素一覧をご紹介します。

クラスも指定要素も簡単に設置できるのが良いですね。
cssを自分で書いたりjavascriptを設定することもないので簡単にグローバルナビゲーションが設置できます。