【コピペ可】Vue.jsでハンバーガーメニューを実現する

この記事の概要

Vue.jsを利用したハンバーガーメニューの実装方法を紹介します。そのままコピペして使えるサンプルコードも掲載しています。Vue.jsではHTMLの属性としてJavaScriptのロジックを書くことでハンバーガーメニューを実現しています。今回はデーターバインディングによってメニューの開閉状態を管理しています。jQueryを使わずとも簡単にハンバーガーメニューが実現できるので是非取り入れてみてください。

ハンバーガーメニューの完成デモ

まずはハンバーガーメニューのデモになります。HTMLとCSSとVue.jsで実装しています。デモのボタンをクリックするとメニューが開き、もう一度押すとメニューが閉じます。スマホサイトでは頻出する定番のUIになります。

See the Pen [Alpine.js]ハンバーガーメニュー by YutoSeta / ホームページ制作のエクレア (@yutoseta) on CodePen.

Vue.jsの実装内容を解説

Vue.jsのCDNを読み込みます。

Vue.jsのプログラムをCDN経由で読み込んでいきます。これを読み込まないと動作しないので注意してください。
本番環境でのCDN利用はおすすめしません、プロトタイピングまたは学習の目的でのみCDNを使用してください。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

Vue.jsのソースコード

HTML内にVue.jsのコードを記述していきます。Vueアプリで制御するDOMの範囲をHTMLのid="app"とjavascriptのel: '#app'部分で指定しています。この要素の内側で仮想DOMが構築され、Vue.jsの様々な機能が使えるようになります。メニューの開閉状態は、open: falseで初期状態の閉じている状態(false)を管理しています。v-on:click="open=!open" という属性を追加してクリックした時にメニューの開閉状態を切り替える処理を記述しています。また、メニューにはv-bind:class="{'is-active' : open }" という属性を追加しています。メニューの開閉状態であるopen = trueの時にis-activeクラスが適用される仕組みです。

HTMLのサンプルコード

<div id="app">
    <button type="button" class="menu-btn" v-on:click="open=!open">
      <i class="fa fa-bars" aria-hidden="true"></i>
    </button>
    <div class="menu" v-bind:class="{'is-active' : open }">
      <div class="menu__item">TOP</div>
      <div class="menu__item">ABOUT</div>
      <div class="menu__item">BLOG</div>
      <div class="menu__item">CONTACT</div>
    </div>
</div>

javascriptのサンプルコード

var app = new Vue({
  el: '#app',
  data: {
    open: false
  }
})

dataでコンポーネント（要素）にプロパティ（データ）を持たせます。

今回は、divタグ(#app)を一番親のコンポーネント（要素）として、その親のコンポーネントにopenという名前のプロパティ(属性、データ）を持たせています。プロパティの初期値はfalseです。オブジェクト形式（{key: value})でコンポーネントにはデータを持たせていきます。openはメニューの閉じ開きの状態を保存させておくデータです。falseは閉じている状態、trueは開いている状態です。

v-on:click=”open=!open”でボタンをクリックするたびにopenの状態を切り替えます。

v-onはjavascriptのaddEventListener、jQueryでいうonメソッドと同等です。コロン（:）でつなぐことでその後にイベント名を記述できます。今回はclickイベントです。属性の値にopen=!open を入れて現在のopenの真偽値をいれかえます。toggle処理と同じことをしています。v-on:clickの代わりに@clickという省略記法も使うことができます。

v-bind:class=”{‘is-active’ : open }”でopenの値に応じてメニューにクラスを付与します。

v-bindはHTMLの属性をVue.jsのデータ処理と紐づけることができます。（データバインディング）コロン（:）でつなぐことでその後にHTMLの属性名を記述できます。今回はclass属性です。{'is-active' : open } はopenの値がtrueの時にis-activeがclass属性に適用されるという意味です。falseの時は適用されません。コンポーネントのデータと連動して属性を切り替えています。v-bind:classの代わりに:classという省略記法も使うことができます。