ハンバーガーボタンとドロワーメニュー

<h1>ハンバーガーメニュー仕組み</h1>

<b>・HTML
・CSS
・javascript(jquery)</b>


1．HTMLで「ハンバーガーアイコン」と「表示されるメニュー」を作成
2．JavaScript(jquery)でハンバーガーアイコンのクリックアクションを作成
3．2のクリックアクションでそれぞれのdivにclassを加えたり消したりする
4．3のclassの有無でdivのCSSが変化し、メニューの表示・非表示が行われる

<b>1．ハンバーガー（三）ボタン</b>
　　(三)ボタンを押すと(☓)ボタンに切り替わりメニューが表示される
<b>2．閉じる（☓）ボタン</b>
　　閉じるボタンを押すとメニューが非表示になり、(三)ボタンに切り替わる
<b>3．メニュー部分（通常時非表示）(クリック時表示)</b>
　　閉じるボタンを押すとメニュー部分が非表示になる

<H1>(例)ハンバーガーメニューの作り方(順番)</H1>
1．ハンバーガーメニューになる元を作る
2．ハンバーガーメニューの背景を作る(配置)
3．ボタン(三本線)を作る
4．クリックしたら閉じるボタン(☓)にする(切り替え)
5. メニューを表示・非表示にする
<b>他にも作り方があり、このつくり方が正しいとは限らない。
※spanで作ったり、divやチェックボックス、a、buttonなどで作っているのを見かける。</b>
***
<b>1. </b>ハンバーガーボタンのもとになるコード

```html
<div class="humburger"><!--ハンバーガーボタン-->
      <span></span>
      <span></span>
      <span></span>
</div>
```

<b>2．</b>背景作る

```css
.humburger {
background-color: beige;　/*分かりやすく色をbeigeに*/
position: fixed;　　　　　 /*今回は固定して作ってます*/
top: 10px;
right: 10px;
width: 40px;
height: 40px;
}
```

<b>3．</b>三本線を作る

```css
.humburger span {
  width: 30px;
  height: 1px;
  background-color: #333;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s; /*真ん中の線がゆっくり消えるように*/
}

.humburger span:nth-of-type(1) {
  transform: translate(-50%, -10px);
}

.humburger span:nth-of-type(3) {
  transform: translate(-50%, 9px);
}
```
<b>4．</b>クリックしたら☓ボタンになるように切り替え
　 真ん中の線を消して、上下の線を☓にする。　

```css
.humburger.active span:nth-of-type(1) {
transform: rotate(45deg) translate(-50%, 0);
transform-origin: 0% 50%;
}

.humburger.active span:nth-of-type(2) {
	opacity: 0;
}

.humburger.active span:nth-of-type(3) {
transform: rotate(-45deg) translate(-50%, 0);
transform-origin: 0% 50%;
}
```

クリックしたらactiveを追加するようにする

```javascript
 document.addEventListener('DOMContentLoaded', function() {
   document.getElementById("humburger").addEventListener("click", function() {
   	this.classList.toggle("active")
   })
  });
```

<b>5.</b>メニューを表示・非表示にする
  元になるメニュー作り、CSSで配置や色などを決める。  
  クリックしたら右からnavが表示され、もう一度クリックすると閉じるようにする。(ドロワーメニュ－みたいにする)

```HTML
<nav id="nav">
   <ul>
          <li><a href="">menu0</a></li>
	  <li><a href="">menu1</a></li>
	  <li><a href="">menu2</a></li>
	  <li><a href="">menu3</a></li>
	  <li><a href="">menu4</a></li>
   </ul>
  </nav>
```

```css
nav {
    position: fixed;
	top: 0px;
	right: -200px;
	width: 180px;
	height: 100%;
	padding: 40px 30px 0 0;
	opacity: 0;
	transition: 0.4s;
	visibility: hidden;
	background-color: #ddd;
	text-align: center; 
	z-index: -1;
}

nav.active {
	opacity: 1;
	visibility: visible;
	right: 0;
}

a {
	font-size: 2rem;
	color: black; 
}	

li {
	padding: 5px 0 10px 0;
	padding-top: 20px;
}
```

<b>4</b>で書いたjavascriptに(navのactiveを追加する)


```javascript
document.addEventListener('DOMContentLoaded', function() {
   document.getElementById("humburger").addEventListener("click", function() {
   	this.classList.toggle("active");
   	document.getElementById("nav").classList.toggle("active");
   })
  });
```


<h1>今回記述したコードで作ったもの</h1>
<b>(クリック前)　画像は拡大してます。
左の文字やボタンは気にしないでください。</b>
![FireShot Capture 037 - 1234 - .jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556803/71ae8424-cbfb-3e87-e09a-e24820e0fefd.jpeg)


<b>(クリック後)</b>
![FireShot Capture 039 - 1234 - .jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556803/8c0781c8-c416-69b7-77a7-0e91abf25c06.jpeg)