Menu UI Components vue.js ライブラリ

Vue.jsで10種類のハンバーガーメニューを「vue-burger-menu」で実装します

2019年11月25日

Vue.jsで10種類のハンバーガーメニューを「vue-burger-menu」で実装します

vue-burger-menuとは

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

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

 

Vue.jsで10種類のハンバーガーメニューを「vue-burger-menu」で実装します

 

環境

Vue 2.6.10
vue-burger-menu 2.0.3

 

インストール

以下のnpmyarnCDNを使ってインストールします。

npm

npm install vue-burger-menu --save

yarn

yarn add vue-burger-menu

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-burger-menu.umd.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/mbj36/vue-burger-menu

 

導入手順

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

(1)webpack等の場合 [注意]モジュール版は未検証です。

import { Slide } from 'vue-burger-menu'

(2)WEBページの場合

const {Slide} = window['vue-burger-menu'];

2.メソッドを設定

Vue.componentSlideを読み込ませます。

Vue.component('slide', Slide);

let app = new Vue({
  el: '#app'
});

3. テンプレートを準備

<Slide> を設置します。

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

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

 

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <slide>
    <a id="home" href="#">
      <span>Home</span>
    </a>
    <a id="about" href="#">
      <span>About</span>
    </a>
    <a id="contact" href="#">
      <span>Contact</span>
    </a>
  </slide>
  <div id="page-wrap"></div>
</div>

 

サンプル

>>専用ページで確認する

 

アニメーション

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

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

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

 

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

  • Push
  • PushRotate
  • ScaleDown
  • ScaleRotate
  • Reveal

 

>>専用ページで確認する

さいごに

サイドバーハンバーガーメニュー実装できるコンポーネントライブラリでした。

今日はこの辺でー

 

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-Menu, UI Components, vue.js, ライブラリ
-, , ,