3-메뉴

미리보기

<!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'); // 위로 올라가면 해제
    }
  });