レスポンシブ対応メニューを作るための簡単なCSSライブラリ Bulma

こんにちは、開発チームの青木です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。

本記事はBulmaを用いたナビゲーションメニューバーの作成方法についてのご紹介となります。 もちろんPC表示、スマホ表示で見た目が変わるレスポンシブデザイン対応です。

目標とするナビゲーションメニューバー

スクロールに追従する上部固定のナビゲーションメニューバーを作成します。 一部の項目はドロップダウンメニューをもち、PC表示の場合はマウスホバーで展開、スマホ表示の場合はタップで展開します。 またスマホの場合のみ、ハンバーガーメニューの実装をします。

レスポンシブ対応フレームワーク Bulmaとは

軽量でデザインがモダンなCSSフレームワークです。 CSS3のflexible boxをベースに作られており、レスポンシブデザインに対応しています。 ここではナビゲーションメニューのみに焦点を絞って説明します。

レスポンシブ対応フレームワーク Bulmaの使用方法

https://bulma.io/ 上のリンクの公式ページからダウンロードし、自前のサーバーに置くことも可能ですし、以下のようにCDNで使うことも可能です。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">

上記のCSSファイルを読み込んでください。 （現時点ではバージョン0.7.5が最新です。）

ナビゲーションメニューバーのコード

基本的にはhtml上にBulmaで役割のあるクラスを付与していき、CSSだけでは追えない動作をJavaScriptで補います。   作成したナビゲーションメニューの見た目は以下です。

ナビゲーションメニューバーのHTML

<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
    <div class="navbar-brand navbar-brand-center">
        <a class="navbar-item logo" href="/"><img alt="logo_name" src="logo.svg"></a>
        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>
    <div class="navbar-menu">
        <div class="navbar-start">
            <div class="navbar-item has-dropdown is-hoverable">
                <a class="navbar-link">ドロップダウンヘッダー1</a>
                <div class="navbar-dropdown">
                    <a class="navbar-item" href="/ddlink1">ドロップダウンリンク1</a>
                    <a class="navbar-item" href="/ddlink2">ドロップダウンリンク2</a>
                    <a class="navbar-item" href="/ddlink3">ドロップダウンリンク3</a>
                    <hr class="navbar-divider">
                    <a class="navbar-item" href="/ddlink4">ドロップダウンリンク4</a>
                </div>
            </div>
            <a class="navbar-item" href="/link1">リンク1</a>
            <a class="navbar-item" href="/link2">リンク2</a>
            <a class="navbar-item" href="/link3">リンク3</a>
            <a class="navbar-item" href="/link4">リンク4</a>
        </div>
        <div class="navbar-end">
            <a class="navbar-item" href="/link11">リンク11</a>
            <a class="navbar-item" href="/link12">リンク12</a>
        </div>
    </div>
</nav>

ナビゲーションメニューバーのJavaScript(jQueryを使用します)

$(function(){
    //useragentを参照しています。
    var isPC = !(/^Mozilla/5.0 ((iPhone;|iPod;|Linux; U; Android|Linux; Android)/i.test(navigator.userAgent));

    //ハンバーガーメニュー
    $(".navbar-burger").on("click",function(){
        $(".navbar-burger").toggleClass("is-active");
        $(".navbar-menu").toggleClass("is-active");
    });

    //ドロップダウン
    if(isPC){
        //PCではBulmaのcssの動きで開閉します
    }else{
        $(".has-dropdown").on("click",function(){
            var $this = $(this);
            $this.toggleClass("is-active");
            $this.find(".navbar-dropdown").slideToggle();
        });
        $(".has-dropdown .navbar-dropdown").hide();
    }
});

実装したナビゲーションメニューバーの解説

class=”navbar”の要素がナビゲーションメニューになります。 こちらにis-fixed-topクラスを付与することで上部固定ヘッダーになります。

BulmaはCSSフレームワークですので、クリックイベントの付与はしてくれません。 スマホ表示時のハンバーガーメニューとドロップダウンメニュー用のイベントは自前で付与することになります。 ハンバーガーメニューではclass=”navbar-burger”、及びclass=”navbar-menu”にis-activeクラスを付与することでメニューの開閉が行われます。

ドロップダウンメニューについてはclass=”navbar-item”の要素がhas-dropdownクラスを持っている場合、PC画面についてはCSSの効果でホバーによる開閉できるのですが、スマホ画面ではホバーがないため、タップによる操作で開閉できるよう調整しています。

まとめ レスポンシブ対応のナビゲーションメニューバー実装について

今回の記事ではBulmaを使ったメニューの作成についてご紹介いたしました。 BulmaはCSSフレームワークですので、メニュー以外の多くの機能があります。 これからのモバイルファーストを意識したサイト制作にかなり強力なライブラリとなるでしょう。

シンメトリックでは、レスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」を提供しています。スマホ中心のサイト制作、リニューアルをお考えでしたら、是非ご検討ください。