1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

#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
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?