Bootstrapでカッコいいナビゲーションバーを表示しよう

業務Webアプリケーションエンジニアのための「Bootstrap」入門 第4回

ドロップダウンメニュー

　次のサンプルのように、ナビゲーションバーにドロップダウンメニューを配置することもできます。

ドロップダウンメニューのあるナビゲーションバー

　ドロップダウンメニューを配置したときのコードは次のとおりです。

リスト3 ドロップダウンメニューのあるナビゲーションバー（navibar3.htmlの抜粋）

<!-- 1.ドロップダウンメニューの作成 -->
<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            アカウント情報<span class="caret"></span>
        </a>
        <!-- 1.メニューの配置 -->
        <ul class="dropdown-menu">
            <li><a href="#">パスワード変更</a></li>
            <li class="divider"></li>
            <li><a href="#">ログアウト</a></li>
        </ul>
    <li>
</ul>

　コードの説明は次のとおりです。

1. ドロップダウンメニューの作成

　ドロップダウンメニューはli要素のclass属性に"dropdown"を指定します。そして、a要素のclass属性に"dropdown-toggle"を指定し、data-toggle属性に"dropdown"を指定します。これで、クリックまたはタップしたときに自動的にドロップダウンが有効になります。

　ドロップダウンメニューであることが分かるように「▼」を表示するには、span要素のclass属性に"caret"を指定します。

　なお、ナビゲーションバーに配置した要素の位置を指定するには、ul要素のclass属性に以下の値を設定します。

メニューの配置位置

class属性の値	説明
navbar-right	右寄せ
navbar-left	左寄せ

2. メニューの配置

　ドロップダウンしたときに表示されるメニューは、ul要素のclass属性に"dropdown-menu"を指定したリストに設定します。たとえばサンプルコードでは、「アカウント情報」をクリックすると、「パスワード変更」と「ログアウト」のメニューがドロップダウンで表示されます。なお、メニューの間に区切りを入れたいときは、li要素のclass属性に"divider"を指定します。

モバイル表示用の省略メニュー

　モバイル端末では多くの情報を一度に表示させると分かりづらくなります。そのため、メニューを省略し、ユーザがタップしたときに、メニューを表示させるように制御することができます。

パソコンで表示したときのナビゲーションバー

　一方、画面幅の狭いモバイル端末では、次のようにメニューの詳細を省略して表示します。

モバイル端末(画面を狭めたとき)に表示したときのナビゲーションバー

メニューが展開されているときのナビゲーションバー

　このようなメニューを作成するサンプルコードは次のとおりです。

リスト4 モバイル表示用の省略メニュー（navibar4.htmlの抜粋）

<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <!-- 1.モバイル表示用の省略メニュー -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle"
            data-toggle="collapse" data-target="#navbar-menu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">在庫管理システム</a>
        </div>

        <!-- 2.ナビゲーションメニュー -->
        <div class="collapse navbar-collapse" id="navbar-menu">
        ～中略～
        </div>
    </div>
</nav>

　コードの説明は次のとおりです。

1. モバイル表示用の省略メニュー

　モバイル表示での省略メニューはナビゲーションバーのヘッダ情報内で指定します。タップするとメニューを表示できるようにするため、ヘッダ情報内にbutton要素を配置します。メニューが省略されているときは、ユーザにメニューがあることが分かるよう、次のような横線が3本入ったコンテンツを表示させます。横線を表示するには、span要素のclass属性に"icon-bar"を指定したものを3つ配置します。

省略メニューのボタン

　button要素のclass属性には"navbar-toggle"を指定し、data-toggle属性を"collapse"にします。これにより、ボタンのタップ（トグル）で要素が展開されたり折り畳んで表示されたりするよう制御できます。また、タップしたときに、どのメニューを表示するかを指定するために、data-target属性にターゲットとなる、ナビゲーションメニューを指定します。

2. ナビゲーションメニュー

　ここでは、具体的にボタンをタップしたときに表示されるメニューを設定します。サンプルでは、ボタンのdata-target属性に"#navbar-menu"を指定しています。これにより、id属性の値が"navbar-menu"であるナビゲーションメニューが表示します。