bulmaのNavbar burgerメニューをvue(nuxt)に組み込む際のテンプレートの書き方

cssフレームワークBulmaのnavbarコンポーネントのモバイル用メニュー

Navbar burgerをvueテンプレートに組み込む際のサンプルはこちらです。

Bulmaの公式ドキュメントにあるハンバーガートグルのサンプルは素のjavascriptなので、vueファイルへそのまま組み込むことができません。

https://bulma.io/documentation/components/navbar/#navbar-burger

ですが、要は

Toggle the “is-active” class on both the “navbar-burger” and the “navbar-menu”

とのことなので、is-activeというクラスを”navbar-burger” と “navbar-menu”に付けたり外したりすれば良いのです。

vueであればそのような機能はとてもシンプルなコードで実装できます。

完成版のコードはこちら

<template>
<nav class="navbar is-transparent">
<div class="navbar-brand"><a class="navbar-item" href="https://bulma.io">
<img src="logo.png" alt="" />
</a>
<div class="navbar-burger burger" v-bind:class="{ 'is-active': menuActive }" v-on:click="menuToggle()" data-target="navbarExampleTransparentExample"><span></span>
<span></span>
<span></span></div>
</div>
<div id="navbarExampleTransparentExample" class="navbar-menu" v-bind:class="{ 'is-active': menuActive }">
<div class="navbar-start"><!-- Menu Item -->
<div class="navbar-item has-dropdown is-hoverable"><a class="navbar-link" href="/documentation/overview/start/">NEWS</a>
<div class="navbar-dropdown is-boxed"><a class="navbar-item" href="/documentation/overview/start/">one</a>
<a class="navbar-item" href="https://bulma.io/documentation/modifiers/syntax/">two</a></div>
</div>
</div>
<div class="navbar-end">//略</div>
</div>
</nav>
</template>
<script>
export default {
data(){
return{
menuActive:false,
}
},
methods: {
menuToggle(){
this.menuActive = !this.menuActive;
},
}
}
</script>

ポイント1:navbarのdivにclassバインドとclickイベントを追加する

ポイントは以下です。
v-bind:class=”{ ‘is-active’: menuActive }” v-on:click=”menuToggle()”

ポイント2:メニュー表示フラグを管理するdataとmethodを追加する

data(){
    return{
        menuActive:false,
    }
},
methods: {
    menuToggle(){
        this.menuActive = !this.menuActive;
    },
}

オプション:モバイル表示時はメニューを画面下へ移動させたい場合
モバイルでの読み込み時に、navのclassにis-fixed-bottomを追加すると、メニューが下部固定になります。

v-bind:class=”{‘is-fixed-bottom’:menuPosition}”

(menuPositionがtrueであればis-fixed-bottomクラスを追加する)

https://bulma.io/documentation/components/navbar/#fixed-navbar
パソコンのウィンドウサイズに応じて変化させたい場合は@yuukiveさんのVueコンポーネントでWindowサイズ変更検知&値取得を参考にしてください。




コメントする