Vue.jsでハンバーガーメニューを実装するなら「vue-burger-menu」が便利

by kabanoki

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-burger-menu.umd.js"></script>
<div id="app">
  <div id="sidebar">
    <component :is="id">
      <a id="home" href="#">
        <span>Home</span>
      </a>
      <a id="about" href="#">
        <span>About</span>
      </a>
      <a id="contact" href="#">
        <span>Contact</span>
      </a>
    </component>
  </div>
  <div id="page-wrap">
    <button @click="onChange('slide')" :class="id == 'slide' ? 'active':'' ">Slide</button>
    <button @click="onChange('bubble')" :class="id == 'bubble' ? 'active':'' ">Bubble</button>
    <button @click="onChange('fall-down')" :class="id == 'fall-down' ? 'active':'' ">FallDown</button>
    <button @click="onChange('push')" :class="id == 'push' ? 'active':'' ">Push</button>
    <button @click="onChange('push-rotate')" :class="id == 'push-rotate' ? 'active':'' ">PushRotate</button>
    <button @click="onChange('reveal')" :class="id == 'reveal' ? 'active':'' ">Reveal</button>
    <button @click="onChange('scale-down')" :class="id == 'scale-down' ? 'active':'' ">ScaleDown</button>
    <button @click="onChange('scale-rotate')" :class="id == 'scale-rotate' ? 'active':'' ">ScaleRotate</button>
    <button @click="onChange('stack')" :class="id == 'stack' ? 'active':'' ">Stack</button>
    <button @click="onChange('elastic')" :class="id == 'elastic' ? 'active':'' ">Elastic</button>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

#app {
      padding-top:80px;
      padding-left:80px;
    }
  
  button {
      float:left;
      height: 100px;
      width: 18%;
      margin: 3px;
      background-color: #62caaa;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      border: 2px solid #fff;
      font-size: 20px;
      border-radius: 10px;
    }

.active {
  outline: dashed red;
}

Vue

const {
  Bubble,
  Elastic,
  FallDown,
  Push,
  PushRotate,
  Reveal,
  ScaleDown,
  ScaleRotate,
  Slide,
  Stack
  } = window['vue-burger-menu'];

Vue.component('slide', Slide);
Vue.component('bubble', Bubble);
Vue.component('fall-down', FallDown);
Vue.component('push', Push);
Vue.component('push-rotate', PushRotate);
Vue.component('reveal', Reveal);
Vue.component('scale-down', ScaleDown);
Vue.component('scale-rotate', ScaleRotate);
Vue.component('stack', Stack);
Vue.component('elastic', Elastic);

let app = new Vue({
  el: '#app',
  data: {
    id: 'slide'
  },
  methods: {
    onChange: function(id){
      this.id = id;
    }
  }
});