メモ
index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>hamburgerMenu</title><linkrel="stylesheet"href="css/style.css"></head><body><header><divclass="navToggle"><span></span><span></span><span></span></div><divid="globalMenuSp"><ulid="manu"class="menu"><li><ahref="#cando"target="_top"class="menu_cando">Home</a></li><li><ahref="#application"target="_top"class="menu_application">About</a></li><li><ahref="#manual"target="_top"class="menu_manual">Skills</a></li><li><ahref="#inquiry"target="_top"class="menu_inquiry">Portfolio</a></li></ul></div></header><script src="js/jquery-3.4.1.min.js"></script><script src="js/hamburger.js"></script></body></html>style.css
#globalMenuSp{position:fixed;z-index:4;top:0;left:0;color:#000;text-align:center;transform:translateY(-100%);transition:all0.6s;width:100%;padding-top:-100px;}#globalMenuSpul{background:#20b2aa;margin:0auto;padding:0;width:100%;display:inherit;}#globalMenuSpulli{font-size:1.1em;list-style-type:none;padding:0;width:100%;border-bottom:1pxsolid#fff;}#globalMenuSpulli:last-child{padding-bottom:0;border-bottom:none;}#globalMenuSpullia{display:block;color:#fff;padding:1em0;}#globalMenuSp.active{transform:translateY(0%);}/*ハンバーガー用CSS*/.navToggle{display:block;position:fixed;right:13px;top:12px;width:42px;height:51px;cursor:pointer;z-index:5;text-align:center;}.navTogglespan{display:block;position:absolute;width:30px;border-bottom:solid3px#20b2aa;-webkit-transition:.35sease-in-out;-moz-transition:.35sease-in-out;transition:.35sease-in-out;left:6px;}.navTogglespan:nth-child(1){top:9px;}.navTogglespan:nth-child(2){top:18px;}.navTogglespan:nth-child(3){top:27px;}.navTogglespan:nth-child(4){border:none;color:#eee;font-size:9px;font-weight:bold;top:34px;}.navToggle.activespan:nth-child(1){top:18px;left:6px;border-bottom:solid3px#eee;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);}.navToggle.activespan:nth-child(2),.navToggle.activespan:nth-child(3){top:18px;border-bottom:solid3px#eee;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);}jquery-3.4.1.min.jsを別途読み込む必要がある
hamburger.js
$(function(){$('.navToggle').click(function(){$(this).toggleClass('active');if($(this).hasClass('active')){$('#globalMenuSp').addClass('active');}else{$('#globalMenuSp').removeClass('active');}});});$('#manu a[href]').on('click',function(event){$('.navToggle').trigger('click');});