ハンバーガーメニュー:ボーダー|Hamburger Menu: Border
HTML
<div class="container">
<div class="hamburger-menu">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<nav class="nav-menu">
<a href="#">メニュー1</a>
<a href="#">メニュー2</a>
<a href="#">メニュー3</a>
</nav>
</div>
CSS
@keyframes fadeIn {
0% {
top: 45%;
opacity: 0;
}
100% {
top: 50%;
opacity: 1;
}
}
.container {
position: relative;
width: 100%;
height: 300px;
}
.hamburger-menu {
width: 32px;
height: 24px;
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
user-select: none;
border: 2px solid #333;
border-radius: 6px;
padding: 6px;
transition: all 0.3s;
}
.hamburger-menu:hover {
border-color: #666;
background: #f5f5f5;
}
.line {
background-color: #333;
height: 2px;
width: calc(100% - 12px);
position: absolute;
transition: all 0.3s ease;
left: 6px;
}
.line:nth-of-type(1) {
top: 20%;
}
.line:nth-of-type(2) {
top: 50%;
transform: translateY(-50%);
}
.line:nth-of-type(3) {
bottom: 20%;
}
.hamburger-menu.active > .line:nth-of-type(1) {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.hamburger-menu.active > .line:nth-of-type(2) {
opacity: 0;
}
.hamburger-menu.active > .line:nth-of-type(3) {
bottom: 50%;
transform: translateY(50%) rotate(-45deg);
}
.nav-menu {
display: none;
flex-direction: column;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
align-items: center;
justify-content: center;
padding: 20px;
width: 50%;
background: white;
border: 3px solid #333;
border-radius: 10px;
opacity: 0;
}
.nav-menu.active {
display: flex;
animation: fadeIn 0.4s forwards;
}
.nav-menu a {
text-decoration: none;
color: #333;
padding: 10px 20px;
margin: 8px;
border: 1px solid #333;
border-radius: 5px;
transition: all 0.3s;
}
.nav-menu a:hover {
background: #333;
color: white;
}
JavaScript
document.querySelector('.hamburger-menu').addEventListener('click', function() {
this.classList.toggle('active');
document.querySelector('.nav-menu').classList.toggle('active');
});