<div id="app">
  <button class="button" type="button" name="button">
    <span class="top"></span>
    <span class="middle"></span>
    <span class="bottom"></span>
  </button>
  <p class="text">← ハンバーガーボタンを押してください</p>
  <div class="nav">
    <div class="nav__body">
      <ul class="nav__lst">
        <li class="nav__item"><a>Works</a></li>
        <li class="nav__item"><a>Blog</a></li>
        <li class="nav__item"><a>People</a></li>
        <li class="nav__item"><a>Recruit</a></li>
        <li class="nav__item"><a>Company</a></li>
        <li class="nav__item"><a>Contact</a></li>
      </ul>
    </div>
    <div class="nav__body"></div>
  </div>
</div>
.button
  display: block
  width: 50px
  height: 50px
  background-color: transparent
  border: none
  position: relative
  z-index: 100
  appearance: none
  cursor: pointer
  outline: none
  &.is-open
    .top
      transform: rotate(45deg)
    .middle
      opacity: 0
    .bottom
      transform: rotate(-45deg)
  
  span
    display: block
    width: 20px
    height: 1px
    margin: auto
    background-color: #000
    position: absolute
    top: 0
    bottom: 0
    left: 0
    right: 0
    transition: .5s ease
    &.top
      transform: translateY(-6px)
    &.bottom
      transform: translateY(6px)
      
.nav
  width: 100%
  height: 100%
  position: fixed
  top: 0
  left: 0
  background-color: #d1dde3
  z-index: 99
  overflow-y: scroll

  &.v-enter,
  &.v-leave-to
    opacity: 0

  &.v-enter-to,
  &.v-leave
    opacity: 1

  &.v-enter-active,
  &.v-leave-active
    transition: opacity 1s ease

  
  &__body
    padding: 40px
  
  &__lst
    list-style: none

  &__item
    font-size: 24px
    line-height: 1.5
    font-weight: 700
    & ~ &
      margin-top: 8px
    a
      color: #000
      padding: 8px 0
      
.text
  position: absolute
  top: 0
  left: 60px
const vue = new Vue({
  el: '#app'
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js