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

ハンバーガーメニュー仕組み

・HTML
・CSS
・javascript(jquery)

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

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

(例)ハンバーガーメニューの作り方(順番)

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

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

2．背景作る

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

3．三本線を作る

.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);
}

4．クリックしたら☓ボタンになるように切り替え
　 真ん中の線を消して、上下の線を☓にする。　

.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を追加するようにする

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

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

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

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;
}

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

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

今回記述したコードで作ったもの

(クリック前)　画像は拡大してます。 左の文字やボタンは気にしないでください。 

(クリック後)