下記のようなハンバーガーメニューをどこからかのサイトで拾ってきて、サンプルデータを作成したので、公開します。
https://drive.google.com/file/d/12QRokmpUEz1EbrrJpRu_tbP3Gwa0E3vj/view?usp=sharing
①通常のメニュー
②クリック時のアクション
ファイル構成はこんな感じです。
HTMLの記述（index.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<nav class="globalMenuSp">
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
</ul>
</nav>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
/* ハンバーガーボタン */
.hamburger {
display : block;
position: fixed;
z-index : 3;
right : 13px;
top : 12px;
width : 42px;
height: 42px;
cursor: pointer;
text-align: center;
}
.hamburger span {
display : block;
position: absolute;
width : 30px;
height : 2px ;
left : 6px;
background : #555;
-webkit-transition: 0.3s ease-in-out;
-moz-transition : 0.3s ease-in-out;
transition : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
top: 10px;
}
.hamburger span:nth-child(2) {
top: 20px;
}
.hamburger span:nth-child(3) {
top: 30px;
}/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
top : 16px;
left: 6px;
background :#fff;
-webkit-transform: rotate(-45deg);
-moz-transform : rotate(-45deg);
transform : rotate(-45deg);
}.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
top: 16px;
background :#fff;
-webkit-transform: rotate(45deg);
-moz-transform : rotate(45deg);
transform : rotate(45deg);
}nav.globalMenuSp {
position: fixed;
z-index : 2;
top : 0;
left : 0;
color: #fff;
background: rgba(0,0,0,0.7);
text-align: center;
width: 100%;
opacity: 0;
transition: opacity .6s ease, visibility .6s ease;
}nav.globalMenuSp ul {
margin: 0 auto;
padding: 0;
width: 100%;
}nav.globalMenuSp ul li {
list-style-type: none;
padding: 0;
width: 100%;
transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
background :#ddd;
}nav.globalMenuSp ul li a {
display: block;
color: #fff;
padding: 1em 0;
text-decoration :none;
}/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
opacity: 100;}
JavaScript記述（ファイル名：script.js）
$(function() {
$('.hamburger').click(function() {
$(this).toggleClass('active');if ($(this).hasClass('active')) {
$('.globalMenuSp').addClass('active');
} else {
$('.globalMenuSp').removeClass('active');
}
});
});
以上がハンバーガーメニューになります。
お大事に。
