Nuxt.jsでBulmaのNavbarのハンバーガーメニューを動作させる

Vue.js/Nuxt.js

2021.03.01

今回は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