スマホ画面になったらボタンになって開閉するメニュー

ヘッダーメニューのよく見るやつ。
パソコンの大きい画面では普通に表示されていて、スマホ画面になったらボタンに変わって出したりしまったりできるやつです。
これが↓

こう↓

JavaScriptのonclickからいにしえの香りがしますけど、動作は速いし、かなりシンプルに書けていると思います。


サンプル→スマホ画面になったらボタンになって開閉するメニュー

1. HTML部分

<header>
	<div id="header-logo">
		<h1>Bloosh Company</h1>
		<p>ここのロゴは消えなかったりする</p>
	</div>
	<!--このボタンはPC画面ではdisplay:noneだよ-->
	<a id="nav-button" onclick="opennav();">
		<img src="menu.png" alt="MENU">
	</a>
	<nav onclick="closenav();">
		<a onclick="closenav();" href="/">リンク１</a>
		<a onclick="closenav();" href="/">リンク２</a>
		<a onclick="closenav();" href="/">リンク３</a>
	</nav>
</header>

2. JavaScript部分

※短いのでHTMLのbodyタグの直前に直接書いちゃいます。

<script type="text/javascript">
	//ナビが開いていれば閉じる、閉じていれば開ける
	function opennav(){
		let nav = document.querySelector("nav");
		if(!nav.classList.contains("open")) { //ナビ閉じている
			nav.className += " open";
		} else{ //ナビ開いている
			nav.classList.remove("open");
		}
		return false;
	}

	//ナビを閉じる
	function closenav(){
		let nav = document.querySelector("nav");
		nav.classList.remove("open");
		return false;
	}
</script>

これは、<nav>にopenというクラスを追加したり除去したりしています。クラス名によって後述のCSSにてナビの開閉を操作します。また、<nav>と<a>にclosenav()を追加することにより、ナビを閉じたり、閉じてからリンク先へ遷移させたりできます。

3. CSS部分

※デザインに関連するcssは省略しています。

<style type="text/css">
	html,body{
		overflow-x: hidden;
		position: relative;
	}
	header{
		display: flex;
		width:100%;
		position: relative;
	}header nav{
		display: flex;
	}header nav a {
		display: block;
	}

	#nav-button{
		display: none;
	}

	@media screen and (max-width:  580px){
		#nav-button{
			display: block;
		}
		header nav{
			position: absolute;
			width: 100vw;
			height:100vh;
			background: rgba(0, 0, 0, 0.8);
			z-index: 1000;
			top: 100%;
			right: -110vw;
			transition: all 300ms 0s ease;
			flex-direction: column;
			justify-content: flex-start;
		}header nav.open{
			right:0;
		}
	}
</style>

 
ナビはスマホ時は画面の右側の見えないところに置いています。
なのでhtml, bodyにはoverflow-x: hiddenとposition:relativeを指定します。
※<nav>がposition:absoluteになるから

<nav>は、<header>のなかにあるので、top:100%にすると、ちょうどヘッダーの下線から出てきて良い塩梅。
スマホ時のナビは、width: 100vwとheight:100vhで、画面いっぱいになるようにしてます。height:100vhをはずすと、メニューの分だけの高さになるよ。