メモ
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hamburgerMenu</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="navToggle">
<span></span><span></span><span></span>
</div>
<div id="globalMenuSp">
<ul id="manu" class="menu">
<li><a href="#cando" target="_top" class="menu_cando">Home</a></li>
<li><a href="#application" target="_top" class="menu_application">About</a></li>
<li><a href="#manual" target="_top" class="menu_manual">Skills</a></li>
<li><a href="#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: all 0.6s;
width: 100%;
padding-top:-100px;
}
#globalMenuSp ul {
background: #20b2aa;
margin: 0 auto;
padding: 0;
width: 100%;
display:inherit;
}
#globalMenuSp ul li {
font-size: 1.1em;
list-style-type: none;
padding: 0;
width: 100%;
border-bottom: 1px solid #fff;
}
#globalMenuSp ul li:last-child {
padding-bottom: 0;
border-bottom: none;
}
#globalMenuSp ul li a {
display: block;
color: #fff;
padding: 1em 0;
}
#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;
}
.navToggle span {
display: block;
position: absolute;
width: 30px;
border-bottom: solid 3px #20b2aa;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
left: 6px;
}
.navToggle span:nth-child(1) {
top: 9px;
}
.navToggle span:nth-child(2) {
top: 18px;
}
.navToggle span:nth-child(3) {
top: 27px;
}
.navToggle span:nth-child(4) {
border: none;
color: #eee;
font-size: 9px;
font-weight: bold;
top: 34px;
}
.navToggle.active span:nth-child(1) {
top: 18px;
left: 6px;
border-bottom: solid 3px #eee;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
top: 18px;
border-bottom: solid 3px #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');
});