【ノンプログラマー】最小JavaScriptを使ったハンバーガー・リスト

See the Pen
Minimal Java Script Hamburger List by tatsuya☆ラボラトリ【 tatsuya-lab.com 】 (@labtatsuya)
on CodePen.

【ノンプログラマー向け】jQuery不要、最小限JavaScriptを使ったハンバーガー・リスト

このご時世、ハンバーガーリストを実装してないスマホサイトは見たことないです。
と言うわけで、ありもののハンバーガーリストではなく、自作することで他者との差別化を目指した最小限のコーディングで作るハンバーガーリストです。
ハンバーガーリスト、自作となると正直面倒い。
クソ忙しい中、ここ拘らんでええやろ。と毎回思いながら、つい手を出してしまいます。
まず、ハンバーガーリストはナビゲーションを畳みます。
display:none;
とか
visibility: hidden;
とか良さそうですがCSSアニメーションと絡める場合は動かなかったりしますので
opacity: 0;
とか
height:0;
width:0;
とか使います。

HTML

ハンバーガーリストのHTMLです。

	<header id="menu" class="off">
		<h1><span onclick="actionToggle();"></span>タイトル</h1>
		<nav>
			<ul>
				<li><a href="#">メニュー</a></li>
				<li><a href="#">メニュー</a></li>
				<li><a href="#">メニュー</a></li>
				<li><a href="#">メニュー</a></li>
			</ul>
		</nav>
	</header>

h1タグの中に折り畳みトリガーのspanタグを組み込みます。
レスポンシブでスマホ以外は
display:none;
しておきます。

CSS

CSSです。

		header{
			text-align: center;/*文字揃えを中央*/
		}
		nav ul{
			list-style-type: none;/*リストマーカーを無し*/
			font-size: 14px;/*文字サイズを14px*/
			height: 0;/*高さをゼロ*/
		}
		nav a{
			color: black;/*文字色を黒*/
			text-decoration: none;/*アンダーラインを無し*/
			display: block;/*ブロック要素に変更*/
			padding:15px;/*内側の余白を15px*/
		}
		nav a:hover{
			background-color: black;/*背景色を白*/
			color: white;/*文字色白*/
		}
		main{
			background-color: cyan;
			height: 100vh;
		}

		/*ハンバーガーリスト設定*/

		.off span{
			width: 40px;/*幅を40px*/
			height: 40px;/*高さを40px*/
			background-image: url(images/baseline_dehaze_black_18dp.png);/*背景画像をbaseline_dehaze_black_18dp.png*/
			background-size: cover;/*背景画像を置い尽くすサイズ*/
			background-position: center center;/*背景画像の位置を横方向で中央 縦方向で中央*/
			cursor: pointer;/*カーソルをpointerにする*/
			transition: all .3s ease-out 0s;/*トランジッションを（全てのプロパティ）all （全体の時間）0.3秒 （アニメーションの進行）ease-out （開始時間）0秒にする*/
		}
		.on span{
			background-image: url(images/clear-24px.svg);/*背景画像をclear-24px.svg*/
		}
		h1::after{
			content: "";/*（内容）contentを空*/
		}
		h1{
			display: flex;/*flexbox*/
			justify-content: space-between;/*flexboxの横方向の揃えを両端揃え*/
			align-items: center;/*flexboxのタテ方向の揃えを中央*/
		}
		.on nav ul{
			height: 200px;/*高さを320px*/
			transition: all .3s ease-out 0s;/*トランジッションを（全てのプロパティ）all （全体の時間）0.3秒 （アニメーションの進行）ease-out （開始時間）0秒にする*/
		}
		nav li{
			opacity: 0;/*不透明度をゼロ*/
		}
		.on nav li{
			opacity: 1;/*不透明度を1*/
			transition: all 2s ease-out 0s;/*トランジッションを（全てのプロパティ）all （全体の時間）2秒 （アニメーションの進行）ease-out （開始時間）0秒にする*/
		}

クラス名の.onと.offでナビゲーションを折りたたんだり展開したりするため、JavaScriptを使ってトグルします。

JavaScript

トグルするためのJavaScriptです。

		function actionToggle() {
			var target = document.getElementById('menu');
			target.classList.toggle('on');
		}

id名のmenuをターゲットにしてクラス名.onと.offをトグルさせます。

発火はspanタグに

<span onclick="actionToggle();"></span>

と埋め込んでおきます。

展開をアニメーションさせるためにCSSトランジッションを設定しておきます。