공개된 소스를 수정하면 바로 멋진 모바일용 메뉴를 구성할 수 있습니다.

https://codepen.io/Chuloo/pen/bvaEGv

아래 라이브러리를 추가해야 합니다.

https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css

https://use.fontawesome.com/releases/v5.0.8/js/all.js

HTML :

<!-- CONTAINER -->
<div class="canvas">
  
  <!--   SIDE NAV  -->
  <nav class="side-nav">
    <ul class="has-text-centered">
      <h5 class="title is-7 has-text-white">The OGs!</h5>
      
      <li><a href="#">Thor</a></li>
      <li><a href="#">Iron Man</a></li>
      <li><a href="#">Spidey</a></li>
      <li><a href="#">Black Widow</a></li>
      <li><a href="#">Nick Fury</a></li>
      <li><a href="#">Capt. Sizzle Amizzle</a></li>
      <li><a href="#">Hawkeye</a></li>
      <li><a href="#">Hulk! Arrghh!!</a></li>
    </ul>
  </nav>
  
  <!--   BODY SECTION -->
  <main class="main-content">
    
    <!--     TOGGLE BUTTON -->
    <a href="#" class="toggle-button">
      <i class="fas fa-bars"></i>
      <i class="far fa-window-close"></i>
    </a>

    
    <!--     BODY TEXT -->
    <h1 class="title">Welcome to the Avengers HQ</h1>
    <h3 class="subtitle">Checkout the badasses on the left!</h3>
    <p>PS: Use the button up top to summon them!</p>
    <p>PPS: Click the menu button to send them back!</p>
    
  </main>
</div>

CSS :

body, .canvas, .main-content {
  min-height: 100vh;
}

.canvas.show-nav {
  transform: translateX(230px);
}
.canvas.show-nav .fa-window-close {
  display: block;
}
.canvas.show-nav .fa-bars {
  display: none;
}

.canvas .side-nav {
  position: absolute;
  display: block;
  width: 230px;
  transform: translateX(-230px);
  color: #E6E9F7;
  background-color: #253781;
  padding-top: 20px;
  min-height: 100%;
}
.canvas .side-nav a {
  color: #EEE;
  display: block;
  padding: 5px 10px;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.main-content {
  padding: 50px;
}

.toggle-button {
  font-size: 3em;
  color: #333;
}

.fa-window-close {
  display: none;
  margin: 12px 0px;
}

.canvas {
  transition: 0.5s cubic-bezier(0.91, 0.06, 0.47, 1.05) transform;
}

JS :

// Write your JavaScript Magic here!!
let container    = document.querySelector('.canvas')
let toggleButton = document.querySelector('.toggle-button')
let icon = document.querySelector('.fa-bars')


toggleButton.addEventListener('click', (e) => {
  e.preventDefault();
  container.classList.toggle('show-nav');  
});