3 메뉴
미리보기
- HTML
- CSS
- JS
- 스티키
<!DOCTYPE html>* {const nav = document.querySelector('.nav'); .nav.sticky {
<!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>
* { 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; }
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')); }});
.nav.sticky { position: fixed; /* 고정 상태 */ top: 0; left: 0; width: 100%;}
// nav의 시작 위치 저장 const navTop = nav.offsetTop;
// 스크롤 이벤트 window.addEventListener('scroll', () => { if (window.scrollY > navTop) { nav.classList.add('sticky'); // nav 높이 넘으면 고정 } else { nav.classList.remove('sticky'); // 위로 올라가면 해제 } });