footerやheaderをハンバーガーメニューに表示させる方法

JS
2023.01.20

ヘッダーのナビゲーションやフッターのナビゲーションをハンバーガーメニューにそのまま使う方法です。

メニューは全画面となっています。

今回はスマホファーストではなくPCファースト用で作ったものなので、

1000px以下でメニューボタンを表示させています。

メニューを表示させた状態で背景はスクロールさせない仕様です。

ふわっと全面表示させるものと、

右から左へスライド表示させる２パターンです。

HTMLとJSはどちらも同じです。

デモもあります。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <main>
	  <div id="box1">
	<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
	<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
	  </div>
	<div id="box2">
		<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
		<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
	</div>
	<div id="box3">
		<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
		<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
	</div>
	<div id="box4">
		<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
		<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
	</div>
  </main>
  <footer>
		<div class="nav">
			<ul>
				<li><a class="close_class" href="#box1">Menu1</a></li>
				<li><a class="close_class" href="#box2">Menu2</a></li>
				<li><a class="close_class" href="#box3">Menu3</a></li>
				<li><a class="close_class" href="#box4">Menu4</a></li>
			</ul>
		</div>
  </footer>
  <div class="menu"><span></span><span></span><span></span></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="js/menu.js"></script>
  
</body>
</html>

JS(jQuery)

$(function() {
	$('.menu').on('click',function(){
		$('body').toggleClass('show');
		$(this).toggleClass('show');
	});
	
	$('.close_class').on('click',function(){
		$('body').removeClass('show');
		$('.menu').removeClass('show');
	})
	
	
});

デモ(ふわっと表示)

See the Pen footer hamburger menu by J&SadaKo (@jandsadako) on CodePen.

デモ(右から左へスライド表示)

See the Pen footer_hamburger_menu_slide by JandSadaKo (@jandsadako) on CodePen.