【Javascript】ハンバーガーメニュー作成（左、上、右から表示）

目標

なるべく無駄な記述を減らし、シンプルにしてみました。

開発環境

ruby 2.5.7
Rails 5.2.4.3
OS: macOS Catalina

前提

※　▶◯◯　を選択すると、説明等が出てきますので、
　　よくわからない場合の参考にしていただければと思います。

実際のコード（左から、ベース）

まずは目標の左から出てくるようにします。

html

<nav id="nav">
  <ul>
    <li><a href="#">リンク1</a></li>
    <li><a href="#">リンク2</a></li>
    <li><a href="#">リンク3</a></li>
  </ul>
</nav>
<div id="hamburger">
  <span class="inner_line" id="line1"></span>
  <span class="inner_line" id="line2"></span>
  <span class="inner_line" id="line3"></span>
</div>

<style>
body{
   background-color: rgba(0,0,0,0.2);
 }
#nav{
  position: absolute;
  height: 100vh;
  width: 40%;
  left: -40%;
  top: 0;
  background: #ffffff;
  transition: .7s;
}
#nav ul{
  padding-top: 80px;
}
#nav ul li{
  list-style-type: none;
}
#hamburger {
  display: none;
  position: absolute;
  top: 20px;
  left: 30px;
  width: 50px;
  height: 44px;
  transition: 1s;
}
.inner_line {
  display: block;
  position: absolute;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: #000000;
  transition: 1s;
  border-radius: 4px;
}
#line1 {
  top: 0;
}
#line2 {
  top: 20px;
}
#line3 {
  bottom: 0px;
}

.in{
  transform: translateX(100%);
}
.line_1,.line_2,.line_3{
  background: #000000;
}
.line_1 {
  transform: translateY(20px) rotate(-45deg);
  top: 0;
}
.line_2 {
  opacity: 0;
}
.line_3 {
  transform: translateY(-20px) rotate(45deg);
  bottom: 0;
}

@media (max-width: 1200px) {
  #hamburger {
    display: block;
  }
}
</style>

<script>
  function hamburger(){
    document.getElementById('line1').classList.toggle('line_1');
    document.getElementById('line2').classList.toggle('line_2');
    document.getElementById('line3').classList.toggle('line_3');
    document.getElementById('nav').classList.toggle('in');
  };
  document.getElementById('hamburger').addEventListener('click',function(){
    hamburger();
  });
</script>

補足【@media (max-width: 1200px)】

レスポンシブ対応をさせる場合は `````` この記述を``````内部に記述してください

実際のコード（上から）

cssのみ編集します。
※ベースからの変更箇所のみ

#nav{
  position: absolute;
  height: 300px;
  width: 40%;
  left: 0; /* 変更 */
  top: -300px; /* 変更 */
  background: #ffffff;
  transition: .7s;
}
.in{
  transform: translateY(100%); /* 変更 */
}

実際のコード（右から）

cssのみ編集します。
※ベースからの変更箇所のみ

#nav{
  position: absolute;
  height: 300px;
  width: 40%;
  right: -40%; /* 変更 */
  top: 0;
  background: #ffffff;
  transition: .7s;
}
#hamburger {
  display: none;
  position: absolute;
  top: 20px;
  right: 30px; /* 変更 */
  width: 50px;
  height: 44px;
  transition: 1s;
}
.in{
  transform: translateX(-100%); /* 変更 */
}

まとめ

考え方としては、メニューの一覧を画面外に表示させておき、
クリックすると表れる仕組みです。
●css
ハンバーガーメニューの横線はinner_lineで、
クリックしたときの挙動はtransform: translate〜;で表現しています。

●javascript
クリックした時に付与するクラスを指定し、新しいcssを適用させています。

ハンバーガーメニューに関しては様々な方法があるため、興味のある方は調べてみると面白いです。

またtwitterではQiitaにはアップしていない技術や考え方もアップしていますので、
よければフォローして頂けると嬉しいです。
詳しくはこちら　https://twitter.com/japwork

参考