【Vue.js】vue-burger-menを使ってハンバーガーメニューを実装

vue-burger-menuとは

vue-burger-menuは、サイドバーハンバーガーメニュー実装できるコンポーネントライブラリです。

CSS transitionsとSVGパスアニメーションを使用したエフェクトとスタイルを10種類備えてあります。

vue-burger-menuの導入方法

以下のnpm、yarn、CDNを使ってインストールします。

• npm

npm install vue-burger-menu --save

• yarn

yarn add vue-burger-menu

• CDN

CDN

<script src="https://cdn.jsdelivr.net/npm/vue-burger-menu@2.0.3/dist/vue-burger-menu.umd.js"></script>

導入手順

1.ライブラリの取り込み

import { Slide } from "vue-burger-menu";
Vue.component("slide", Slide);

2. テンプレートを準備

を設置します。

は以下のプロパティを設定できます。

<slide right disableOutsideClick width="200">
        <router-link to="/" class="header-link neon3 flash">HOME</router-link>
        <router-link to="/about" class="header-link neon3 flash"
          >ABOUT</router-link
        >
        <router-link :to="`/board/${this.uid}`" class="header-link neon3 flash"
          >POST</router-link
        >
        <router-link
          to="/signup"
          class="header-link neon3 flash"
          v-if="!authenticatedUser"
          >SINGUP</router-link
        >
        <router-link
          to="/signin"
          class="header-link neon3 flash"
          v-if="!authenticatedUser"
          >SINGIN</router-link
        >
        <router-link :to="`/mypage/${this.uid}`" class="header-link neon3 flash"
          >MYPAGE</router-link
        >
      </slide>

right	バーガーアイコンを左右のどちらに表示するか
width	メニューの幅を指定できます。
isOpen	サイドバーを開くか閉じるかを制御できます。
disableOutsideClick	外部クリックがトリガーされたときにメニューを閉じることをオフにすることができます。
disableEsc	Escキーを押すとメニューが閉じます。
noOverlay	オーバーレイをオフにできます。
burgerIcon	バーガーアイコンを無効にできます。
crossIcon	展開アイコンを無効にできます。

3.アニメーションの設定

アニメーション詳細につきましてはGithubをご参照下さい。

10種類のアニメーションを実装することができます。

以下が設定可能なプロパティです。

• Slide
• ScaleDown
• ScaleRotate
• Reveal
• Push
• PushRotate
• FallDown
• Stack
• Elastic
• Bubble

アニメーションによっては、メインコンテンツのコンポーネントに id="page-wrap" を設定する必要があります。
以下のアニメーションを使用する場合は必ず設定しましょう。

• Push
• PushRotate
• ScaleDown
• ScaleRotate
• Reveal