미리보기
HTML
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2단계 메가메뉴</title>
<link rel="stylesheet" href="menu.css">
</head>
<body>
<nav class="nav">
<ul class="menu">
<li class="item">
<a href="#" class="link">카테고리1</a>
<div class="mega">
<div class="row">
<div class="col">
<h3>서브1-1</h3>
<ul>
<li><a href="#">항목1</a></li>
<li><a href="#">항목2</a></li>
<li><a href="#">항목3</a></li>
</ul>
</div>
<div class="col">
<h3>서브1-2</h3>
<ul>
<li><a href="#">항목1</a></li>
<li><a href="#">항목2</a></li>
<li><a href="#">항목3</a></li>
</ul>
</div>
<div class="col">
<h3>서브1-3</h3>
<ul>
<li><a href="#">항목1</a></li>
<li><a href="#">항목2</a></li>
<li><a href="#">항목3</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="item">
<a href="#" class="link">카테고리2</a>
<div class="mega">
<div class="row">
<div class="col">
<h3>서브2-1</h3>
<ul>
<li><a href="#">항목1</a></li>
<li><a href="#">항목2</a></li>
</ul>
</div>
<div class="col">
<h3>서브2-2</h3>
<ul>
<li><a href="#">항목1</a></li>
<li><a href="#">항목2</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="item">
<a href="#" class="link">카테고리3</a>
<div class="mega">
<div class="row">
<div class="col">
<h3>서브3-1</h3>
<ul>
<li><a href="#">항목1</a></li>
<li><a href="#">항목2</a></li>
<li><a href="#">항목3</a></li>
<li><a href="#">항목4</a></li>
</ul>
</div>
<div class="col">
<h3>서브3-2</h3>
<ul>
<li><a href="#">항목1</a></li>
<li><a href="#">항목2</a></li>
</ul>
</div>
<div class="col">
<h3>서브3-3</h3>
<ul>
<li><a href="#">항목1</a></li>
<li><a href="#">항목2</a></li>
<li><a href="#">항목3</a></li>
</ul>
</div>
<div class="col">
<h3>서브3-4</h3>
<ul>
<li><a href="#">항목1</a></li>
<li><a href="#">항목2</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="item">
<a href="#" class="link">카테고리4</a>
<div class="mega">
<div class="row">
<div class="col">
<h3>서브4-1</h3>
<ul>
<li><a href="#">항목1</a></li>
<li><a href="#">항목2</a></li>
<li><a href="#">항목3</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</nav>
<section>
<h1>2단계 메가메뉴 예제</h1>
<p>상단 메뉴에 마우스를 올려보세요.</p>
</section>
<script src="menu.js"></script>
</body>
</html>
```
CSS
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.nav {
background: #333;
position: relative;
z-index: 999;
}
.menu {
list-style: none;
display: flex;
justify-content: space-evenly;
align-items: center;
width: 100%;
max-width: 1200px;
margin: auto;
text-align: center;
}
.item {
width: calc(80% / 4);
}
.link {
display: block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
}
.link:hover {
background: #555;
}
.mega {
position: absolute;
top: 100%;
left: 0;
width: 100vw;
background: #eee;
border-bottom: 1px solid #ddd;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s;
z-index: 1000;
}
.item:hover .mega,
.item:focus-within .mega,
.item.on .mega {
max-height: 500px;
}
.row {
display: flex;
padding: 20px;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.col {
flex: 1;
}
.col h3 {
margin-bottom: 10px;
font-size: 14px;
}
.col ul {
list-style: none;
}
.col ul li {
margin-bottom: 5px;
}
.col ul li a {
color: #333;
text-decoration: none;
font-size: 13px;
}
.col ul li a:hover {
text-decoration: underline;
}
.cnt {
padding: 50px;
}
section {
padding: 2vw;
height: 100vh;
}
```
JS
```js
const nav = document.querySelector('.nav');
const items = document.querySelectorAll('.item');
// 마우스 오버로 메뉴 열기
items.forEach(item => {
item.addEventListener('mouseenter', () => {
// 다른 메뉴 닫기
items.forEach(i => i.classList.remove('on'));
// 현재 메뉴 열기
item.classList.add('on');
});
});
// nav 영역 벗어나면 모두 닫기
nav.addEventListener('mouseleave', () => {
items.forEach(item => item.classList.remove('on'));
});
// ESC 키로 닫기
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
items.forEach(item => item.classList.remove('on'));
}
});
```
스티키
```css
.nav.sticky {
position: fixed; /* 고정 상태 */
top: 0;
left: 0;
width: 100%;
}
```
```js
// nav의 시작 위치 저장
const navTop = nav.offsetTop;
// 스크롤 이벤트
window.addEventListener('scroll', () => {
if (window.scrollY > navTop) {
nav.classList.add('sticky'); // nav 높이 넘으면 고정
} else {
nav.classList.remove('sticky'); // 위로 올라가면 해제
}
});
```