Untitled

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>가로 내비게이션 메뉴</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        background-color: #f5f5f5;
      }

      nav {
        position: relative;
        background: #333;
        padding: 0 1rem;
      }

      .nav-menu {
        display: flex;
        list-style: none;
      }

      nav li {
        position: relative;
      }

      nav a {
        display: block;
        padding: 1rem 1.5rem;
        color: #fff;
        text-decoration: none;
        transition: all 0.3s ease;
      }

      nav a:hover {
        background: #555;
        transform: translateY(-2px);
      }

      nav a.active {
        background: #007bff;
        color: #fff;
      }

      nav a.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: #0056b3;
      }

      /* 햄버거 메뉴 버튼 스타일 */
      .hamburger-menu {
        display: none;
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        flex-direction: column;
        cursor: pointer;
        z-index: 1000;
      }

      .hamburger-menu span {
        width: 25px;
        height: 3px;
        background-color: #fff;
        margin: 3px 0;
        transition: 0.3s;
      }

      /* 햄버거 메뉴 활성화시 애니메이션 - 완벽한 2D X 모양 */
      .hamburger-menu.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
      }

      .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
      }

      .hamburger-menu.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
      }

      @media (max-width: 768px) {
        nav {
          padding: 1.5rem 1rem;
        }

        .hamburger-menu {
          display: flex;
        }

        .nav-menu {
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          flex-direction: column;
          background: #333;
          max-height: 0;
          overflow: hidden;
          opacity: 0;
          transform: translateY(-10px);
          transition: all 0.4s ease-in-out;
          z-index: 999;
        }

        .nav-menu.active {
          max-height: 300px;
          opacity: 1;
          transform: translateY(0);
        }

        .nav-menu li {
          opacity: 0;
          transform: translateX(-20px);
          transition: all 0.3s ease;
        }

        .nav-menu.active li {
          opacity: 1;
          transform: translateX(0);
        }

        .nav-menu.active li:nth-child(1) {
          transition-delay: 0.1s;
        }
        .nav-menu.active li:nth-child(2) {
          transition-delay: 0.2s;
        }
        .nav-menu.active li:nth-child(3) {
          transition-delay: 0.3s;
        }
        .nav-menu.active li:nth-child(4) {
          transition-delay: 0.4s;
        }

        nav a {
          padding: 1rem;
          border-bottom: 1px solid #444;
        }

        nav a:hover {
          transform: none;
          background: #555;
          padding-left: 1.5rem;
        }

        nav li:last-child a {
          border-bottom: none;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <div class="hamburger-menu">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <ul class="nav-menu">
          <li><a href="index.html" class="active">홈</a></li>
          <li><a href="about.html">소개</a></li>
          <li><a href="services.html">서비스</a></li>
          <li><a href="contact.html">연락처</a></li>
        </ul>
      </nav>
    </header>

    <main style="padding: 2rem"></main>

    <script>
      // 햄버거 메뉴 토글 기능
      const hamburgerMenu = document.querySelector('.hamburger-menu');
      const navMenu = document.querySelector('.nav-menu');

      hamburgerMenu.addEventListener('click', function () {
        hamburgerMenu.classList.toggle('active');
        navMenu.classList.toggle('active');
      });

      // 메뉴 항목 클릭시 모바일에서 메뉴 닫기
      const menuItems = document.querySelectorAll('.nav-menu a');
      menuItems.forEach((item) => {
        item.addEventListener('click', function () {
          if (window.innerWidth <= 768) {
            hamburgerMenu.classList.remove('active');
            navMenu.classList.remove('active');
          }
        });
      });

      // 화면 크기 변경시 메뉴 상태 초기화
      window.addEventListener('resize', function () {
        if (window.innerWidth > 768) {
          hamburgerMenu.classList.remove('active');
          navMenu.classList.remove('active');
        }
      });
    </script>
  </body>
</html>
Editor is loading...