概要
Hero を使ってヘッダーを実装している場合、スマホ表示用にハンバーガーメニューが使えます
ボタンや CSS の処理はサンプルから引っ張ればいいのですが実際にメニューの表示/非表示を実現するには自分で JavaScript を実装しなければなりません
今回はその方法を紹介します
環境
- macOS 10.14.5
- Bulma 0.7.5
準備
今回は Ruby を使ってアプリを作成します
アプリ雛形作成
bundle initvim Gemfile
gem "sinatra"bundle install --path vendormkdir viewstouch views/index.erbmkdir -p public/jstouch public/js/custom.jstouch app.rb
アプリ作成
vim app.rb
require 'sinatra'
get '/' do
erb :index
endBulma をロードしたテンプレート作成
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 がないので自分で作る必要があるという話でした
