Bootstrapの使い方(ナビゲーション編)

Tag:

Bootstrapを用いてナビゲーションバーを作成する方法について紹介します。

ナビゲーションバーの使用例

Bootstrapのナビゲーションバーを利用すると、
768px以上の画面では、横にメニューを並べて表示し、
767px以下の画面では、縦にメニューを並べて表示することができます。

768px以上の画面
bootstrap メニュー 768px以上

bootstrap メニュー 768px以上
767px以下の画面
bootstrap メニュー 767px以下

bootstrap メニュー 767px以下

bootstrap メニュー 767px以下

では、具体的にソースを見てみます。

サンプルソース
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">                
        <!-- ナビゲーションバーのヘッダー -->
        <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>

        <!-- ナビゲーションメニュー -->
        <div class="collapse navbar-collapse" id="navbar-menu">                    
            <!-- リストの配置 -->
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">メニュー1</a></li>
                <li><a href="#">メニュー2</a></li>
                <li><a href="#">メニュー3</a></li>
            </ul>
           
            <ul class="nav navbar-nav navbar-right">                        
                <!-- ドロップダウンメニューの配置 -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        ドロップダウンメニュー<span class="caret"></span>
                    </a>
                    <!-- リストの配置 -->
                    <ul class="dropdown-menu">
                        <li><a href="#">ドロップダウンメニュー1</a></li>
                        <li class="divider"></li>
                        <li><a href="#">ドロップダウンメニュー2</a></li>
                    </ul>
                <li>
            </ul>
        </div>
    </div>
</nav>

何点か補足します。
まず、nav要素にnavbar-fixed-topとクラスを指定することで、ナビゲーションバーを画面上部に固定表示することができます。

次に、モバイル表示用のトグルボタンですが、button要素のdata-target属性には、表示・非表示したいターゲットのIDを指定します。つまり、ナビゲーションメニューのIDを指定します。これにより、トグルボタンでナビゲーションメニューの表示・非表示を切り替えることができます。

ナビゲーションバーの使用例2

次の画像のようにサイト名の下にナビゲーションメニューを表示したい場合があると思います。

bootstrap メニュー 768px以上

その場合は、下記ソースのように
ナビゲーションバーのヘッダーとナビゲーションメニューをそれぞれcontainerで囲みます。

サンプルソース
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- ナビゲーションバーのヘッダー -->
        <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>
    </div>
        
    <div class="container">
        <!-- ナビゲーションメニュー -->
        <div class="collapse navbar-collapse" id="navbar-menu">                    
            <!-- リストの配置 -->
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">メニュー1</a></li>
                <li><a href="#">メニュー2</a></li>
                <li><a href="#">メニュー3</a></li>
            </ul>
           
            <ul class="nav navbar-nav navbar-right">                        
                <!-- ドロップダウンメニューの配置 -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        ドロップダウンメニュー<span class="caret"></span>
                    </a>
                    <!-- リストの配置 -->
                    <ul class="dropdown-menu">
                        <li><a href="#">ドロップダウンメニュー1</a></li>
                        <li class="divider"></li>
                        <li><a href="#">ドロップダウンメニュー2</a></li>
                    </ul>
                <li>
            </ul>
        </div>
    </div>
</nav>

スポンサーリンク