2019年7月5日金曜日

Bulma CSS で Navbar を使う場合にはスマホ用のハンバーガメニューの ON/OFF は自分で実装しなければならない

概要
環境
準備
- アプリ雛形作成
- アプリ作成
Bulma をロードしたテンプレート作成
custom.js の作成
動作確認
最後に

概要

Hero を使ってヘッダーを実装している場合、スマホ表示用にハンバーガーメニューが使えます
ボタンや CSS の処理はサンプルから引っ張ればいいのですが実際にメニューの表示/非表示を実現するには自分で JavaScript を実装しなければなりません
今回はその方法を紹介します

環境

macOS 10.14.5
Bulma 0.7.5

準備

今回は Ruby を使ってアプリを作成します

アプリ雛形作成

bundle init
vim Gemfile

gem "sinatra"

bundle install --path vendor
mkdir views
touch views/index.erb
mkdir -p public/js
touch public/js/custom.js
touch app.rb

アプリ作成

vim app.rb

require 'sinatra'

get '/' do
  erb :index
end

Bulma をロードしたテンプレート作成

CDN があるのでそれを使います
jQuery も使いたいので CDN からロードしています
Hero のサンプルはこのあたりからコピペしているだけです
section タグを body 内に貼り付ければ OK です

views/index.erb

<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" integrity="sha256-vK3UTo/8wHbaUn+dTQD0X6dzidqc5l7gczvH+Bnowwk=" crossorigin="anonymous" />
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="/js/custom.js"></script>
</head>
<body>
<section class="hero is-success is-fullheight">
  <!-- Hero head: will stick at the top -->
  <div class="hero-head">
    <header class="navbar">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item">
            <img src="https://bulma.io/images/bulma-type-white.png" alt="Logo">
          </a>
          <span class="navbar-burger burger" data-target="navbarMenuHeroC">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </div>
        <div id="navbarMenuHeroC" class="navbar-menu">
          <div class="navbar-end">
            <a class="navbar-item is-active">
              Home
            </a>
            <a class="navbar-item">
              Examples
            </a>
            <a class="navbar-item">
              Documentation
            </a>
            <span class="navbar-item">
              <a class="button is-success is-inverted">
                <span class="icon">
                  <i class="fab fa-github"></i>
                </span>
                <span>Download</span>
              </a>
            </span>
          </div>
        </div>
      </div>
    </header>
  </div>

  <!-- Hero content: will be in the middle -->
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title">
        Title
      </h1>
      <h2 class="subtitle">
        Subtitle
      </h2>
    </div>
  </div>

  <!-- Hero footer: will stick at the bottom -->
  <div class="hero-foot">
    <nav class="tabs is-boxed is-fullwidth">
      <div class="container">
        <ul>
          <li class="is-active"><a>Overview</a></li>
          <li><a>Modifiers</a></li>
          <li><a>Grid</a></li>
          <li><a>Elements</a></li>
          <li><a>Components</a></li>
          <li><a>Layout</a></li>
        </ul>
      </div>
    </nav>
  </div>
</section>
</body>
</html>

custom.js の作成

ここにハンバーガーメニューの表示/非表示を実装します
基本は is-active をトグルすれば OK です

vim public/js/custom.js

$(document).ready(function(){
  var burger = $('.burger');
  var menu = $('#' + burger.data('target'));
  burger.on('click', function() {
    burger.toggleClass('is-active');
    menu.toggleClass('is-active');
  });
});

. burger クラスをクリックしたら burger と menu の DOM をトグルしているだけです
menu は burger.data('target') で id="navbarMenuHeroC" の DOM を取得しています

動作確認

bundle exec ruby app.rb

で localhost:4567 にアクセスしましょう
ブラウザのデベロッパーツールを起動してビューをスマホモードに切り替えましょう
ハンバーガーメニューとして表示されるのはスマホからアクセスしたときだけです

最後に

Bulma css の Hero でハンバーガーメニューを実装してみました
HTML と CSS はサンプルにありますが JS がないので自分で作る必要があるという話でした

hawksnowlog