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

# 目標
なるべく無駄な記述を減らし、シンプルにしてみました。
![左から.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700999/b5c5cbf0-a197-12e4-707b-f163cf41f613.gif)



# 開発環境
ruby 2.5.7
Rails 5.2.4.3
OS: macOS Catalina

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

# 実際のコード（左から、ベース）
まずは目標の左から出てくるようにします。

```erb: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>
```
<details><summary>補足【@media (max-width: 1200px)】</summary>
レスポンシブ対応をさせる場合は
```<meta name="viewport" content="width=device-width,initial-scale=1.0">```
この記述を```<head></head>```内部に記述してください
</details>


# 実際のコード（上から）
cssのみ編集します。
※ベースからの変更箇所のみ
![上から.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700999/f3e65fd8-1615-1d58-b3ec-306bbe431d52.gif)


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

# 実際のコード（右から）
cssのみ編集します。
※ベースからの変更箇所のみ
![右から.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700999/e8f572bb-3993-9bdc-5a47-53ce52f5cc8e.gif)


```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

# 参考
https://codepen.io/asukas/pen/oNbxpVy