ハンバーガーメニュー:ネオン(オーバーレイ)|Hamburger Menu: Neon Overlay
HTML
<div class="container">
<div class="hamburger-menu">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="overlay"></div>
<nav class="nav-menu">
<a href="#">Menu 1</a>
<a href="#">Menu 2</a>
<a href="#">Menu 3</a>
<a href="#">Menu 4</a>
<a href="#">Menu 5</a>
<a href="#">Menu 6</a>
<a href="#">Menu 7</a>
<a href="#">Menu 8</a>
<a href="#">Menu 9</a>
<a href="#">Menu 10</a>
</nav>
</div>
CSS
.container {
position: relative;
width: 100%;
height: 300px;
}
.hamburger-menu {
width: 36px;
height: 26px;
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
user-select: none;
background: #000;
border: 2px solid #00ff88;
border-radius: 8px;
padding: 8px;
box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
transition: all 0.3s;
z-index: 1001;
}
.hamburger-menu:hover {
box-shadow: 0 0 30px rgba(0, 255, 136, 0.8);
transform: scale(1.05);
}
.line {
background-color: #00ff88;
height: 2px;
width: calc(100% - 16px);
position: absolute;
transition: all 0.3s ease;
box-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
left: 8px;
}
.line:nth-of-type(1) {
top: 25%;
}
.line:nth-of-type(2) {
top: 50%;
transform: translateY(-50%);
}
.line:nth-of-type(3) {
bottom: 25%;
}
.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);
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 255, 136, 0.1);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 999;
}
.overlay.active {
opacity: 1;
visibility: visible;
}
.nav-menu {
display: none;
flex-direction: column;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
align-items: center;
justify-content: flex-start;
padding: 15px;
width: 300px;
background: #000;
border: 2px solid #00ff88;
border-radius: 15px;
box-shadow: 0 0 30px rgba(0, 255, 136, 0.6);
opacity: 0;
z-index: 1000;
max-height: 80%;
overflow-y: auto;
}
.nav-menu.active {
display: flex;
animation: fadeIn 0.5s forwards;
}
.nav-menu a {
text-decoration: none;
color: #00ff88;
padding: 10px;
margin: 8px;
border: 1px solid #00ff88;
border-radius: 8px;
transition: all 0.3s;
text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
opacity: 0;
transform: translateY(-20px);
pointer-events: none;
}
.nav-menu a.show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.nav-menu a:hover {
background: #00ff88;
color: #000;
box-shadow: 0 0 20px rgba(0, 255, 136, 0.8);
}
@keyframes fadeIn {
0% {
top: 45%;
opacity: 0;
}
100% {
top: 50%;
opacity: 1;
}
}
JavaScript
document.querySelectorAll('.hamburger-menu').forEach(hamburgerMenu => {
const container = hamburgerMenu.parentElement;
const navMenu = container.querySelector('.nav-menu');
const overlay = container.querySelector('.overlay');
hamburgerMenu.addEventListener('click', () => {
hamburgerMenu.classList.toggle('active');
navMenu.classList.toggle('active');
if (navMenu.classList.contains('active')) {
overlay.classList.add('active');
setTimeout(() => {
const menuItems = navMenu.querySelectorAll('a');
menuItems.forEach((item, index) => {
setTimeout(() => {
item.classList.add('show');
}, index * 150);
});
}, 300);
} else {
const menuItems = navMenu.querySelectorAll('a');
menuItems.forEach(item => {
item.classList.remove('show');
});
setTimeout(() => {
overlay.classList.remove('active');
}, 200);
}
});
});