자바스크립트 애니메이션 프레임을 활용한 드롭다운 메뉴 애니메이션 만들기

18 Oct 2023

javascript

드롭다운 메뉴는 웹사이트에서 네비게이션 메뉴를 표시하는 일반적인 방법입니다. 애니메이션이 추가되면 사용자 경험을 향상시킬 수 있습니다. 이번 튜토리얼에서는 자바스크립트 애니메이션 프레임을 활용하여 드롭다운 메뉴에 애니메이션을 추가하는 방법을 알아보겠습니다.

시작하기 전에

이 튜토리얼에서는 HTML, CSS, JavaScript에 대한 기본적인 지식이 필요합니다. 또한, 웹 브라우저에서 자바스크립트 애니메이션을 지원하는지 확인해야 합니다. 대부분의 최신 브라우저에서는 지원되지만, 일부 구형 브라우저는 애니메이션을 지원하지 않을 수 있습니다.

HTML 구조 설정하기

우선, 드롭다운 메뉴를 위한 기본적인 HTML 구조를 설정해야 합니다. 다음과 같이 HTML을 작성해주세요:

<nav>
  <ul class="menu">
    <li><a href="#">메뉴1</a>
      <ul class="submenu">
        <li><a href="#">서브메뉴1</a></li>
        <li><a href="#">서브메뉴2</a></li>
        <li><a href="#">서브메뉴3</a></li>
      </ul>
    </li>
    <li><a href="#">메뉴2</a></li>
    <li><a href="#">메뉴3</a>
      <ul class="submenu">
        <li><a href="#">서브메뉴4</a></li>
        <li><a href="#">서브메뉴5</a></li>
        <li><a href="#">서브메뉴6</a></li>
      </ul>
    </li>
  </ul>
</nav>

위의 예시는 메인 메뉴와 각 메뉴에 대한 서브메뉴를 포함한 간단한 드롭다운 메뉴 구조입니다.

CSS 스타일 설정하기

드롭다운 메뉴를 디자인하기 위해 CSS 스타일을 설정해주세요. 아래의 예시는 간단한 스타일을 설정한 예시입니다. 필요에 따라 스타일을 수정해주세요.

.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  display: inline-block;
  position: relative;
}

.menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

.submenu {
  position: absolute;
  top: 40px;
  left: 0;
  display: none;
}

.submenu li {
  display: block;
  background-color: #f1f1f1;
}

.submenu li a {
  padding: 10px;
  color: #000;
}

.menu li:hover .submenu {
  display: block;
}

JavaScript 애니메이션 적용하기

이제 자바스크립트를 사용하여 애니메이션을 적용해보겠습니다. 애니메이션 프레임을 활용하여 드롭다운 메뉴가 부드럽게 나타나고 사라지도록 만들어보겠습니다.

// 드롭다운 메뉴 요소 선택하기
const menuItems = document.querySelectorAll('.menu li');

// 각 메뉴 항목에 이벤트 리스너 추가하기
menuItems.forEach(function(menuItem) {
  menuItem.addEventListener('mouseenter', function() {
    // 메뉴에 마우스가 진입할 때 애니메이션 시작
    const submenu = this.querySelector('.submenu');
    submenu.style.display = 'block';
    submenu.style.opacity = '0';

    let opacity = 0;

    function animate() {
      // 애니메이션 프레임을 통해 opacity 값 조절하여 부드러운 애니메이션 적용
      opacity += 0.1;
      submenu.style.opacity = opacity;

      if (opacity < 1) {
        requestAnimationFrame(animate);
      }
    }

    animate();
  });

  menuItem.addEventListener('mouseleave', function() {
    // 메뉴에서 마우스가 벗어날 때 애니메이션 시작
    const submenu = this.querySelector('.submenu');
    submenu.style.opacity = '1';

    let opacity = 1;

    function animate() {
      // 애니메이션 프레임을 통해 opacity 값 조절하여 부드러운 애니메이션 적용
      opacity -= 0.1;
      submenu.style.opacity = opacity;

      if (opacity > 0) {
        requestAnimationFrame(animate);
      } else {
        submenu.style.display = 'none';
      }
    }

    animate();
  });
});

위의 JavaScript 코드는 드롭다운 메뉴 항목에 마우스를 올렸을 때와 벗어났을 때 애니메이션을 적용합니다. 애니메이션 프레임을 사용하여 부드러운 효과를 만들어냅니다.

이제 HTML, CSS, JavaScript를 각각 연결하여 웹 페이지에서 동작하는 드롭다운 메뉴 애니메이션을 확인할 수 있습니다.

결론

이 튜토리얼에서는 자바스크립트 애니메이션 프레임을 활용하여 드롭다운 메뉴에 애니메이션을 추가하는 방법을 알아보았습니다. 이를 통해 사용자 경험을 향상시킬 수 있으며, 다양한 애니메이션 효과를 적용할 수 있습니다.

더 많은 자바스크립트 애니메이션 기법을 배우고 싶다면, 공식 자바스크립트 문서 또는 다른 온라인 자료를 참고해보세요.

#JavaScript# #애니메이션