今回はBulmaのNavbarをモバイルに対応させてハンバーガーメニューを動作させる方法を書きます。
BulmaはJavaScriptを含んでいないためハンバーガーメニューを動かすには自前でJavaScriptを書く必要があります。
BulmaのドキュメントにjQueryで動作させる方法と生のJavaScriptを書く方法の2種類が紹介されていますがせっかくNuxt.jsを使用しているのでもっと短いコードで書いてみます。
components/navbar.vue
<nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="https://bulma.io"> <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28"> </a> <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample" v-bind:class="nav_class" @click="show"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu"v-bind:class="nav_class"> <div class="navbar-start"> <a class="navbar-item"> Home </a> <a class="navbar-item"> Documentation </a> </div> </div> </div> </div> </nav>
ベースのHTMLは公式のドキュメントに載っている物をそのまま使用します。
ハンバーガーメニューになっているaタグにはv-bind:class=”nav_class”と@click=”show”をコンテンツを囲っているdivタグにはv-bind:class=”nav_class”を追加しておきます。
JS
data(){ return{ nav_class:"" } }, methods:{ show:function(){ if (this.nav_class == ""){ this.nav_class = "is-active" }else{ this.nav_class = "" } } }
aタグとdivタグのclassにis-activeを追加することでハンバーガーメニューを動作させられます。
他のフレームワークでも同じようにclassにis-activeを追加するコードを書くことで実装できると思います。
参考サイト

Navbar
Advanced multi-part components with lots of possibilities
コメント