Bloosh Company

記事のサムネイル画像です。

2020年8月2日

Development>フロントエンド

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

, , , ,

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

こう↓

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="/">リンク1</a>
		<a onclick="closenav();" href="/">リンク2</a>
		<a onclick="closenav();" href="/">リンク3</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: hiddenposition:relativeを指定します。
<nav>position:absoluteになるから

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

スマホ画面になったらボタンになって開閉するメニュー | ブルーシュカンパニー

前の記事>>

サブドメインまたは独自ドメインをマルチドメイン方式のWordPressで運用する