[javascript] Hammer.js를 사용하여 드롭다운 메뉴를 구현하는 방법은?

27 Nov 2023

javascript

먼저, HTML 구조를 설정해야 합니다. 드롭다운 메뉴를 포함하는 요소를 만들고, 해당 요소를 터치 또는 클릭하여 드롭다운 메뉴를 토글할 수 있도록 해야합니다. 아래는 간단한 HTML 예시입니다.

<div id="dropdown">
  <button id="toggleBtn">메뉴 열기</button>
  <ul class="dropdown-menu">
    <li>항목 1</li>
    <li>항목 2</li>
    <li>항목 3</li>
  </ul>
</div>

다음으로, Hammer.js를 설치하고 해당 요소에 이벤트 리스너를 추가해야합니다. 아래는 Hammer.js를 사용하여 드롭다운 메뉴를 구현하는 JavaScript 코드입니다.

// Hammer.js 설치
// npm install hammerjs

// Hammer.js를 가져옴
import Hammer from 'hammerjs';

// 드롭다운 메뉴 요소를 가져옴
const dropdown = document.getElementById('dropdown');

// Hammer.js 인스턴스 생성
const hammer = new Hammer(dropdown);

// 드롭다운 메뉴가 열린 상태인지 여부를 저장하는 변수
let dropdownOpen = false;

// 터치 이벤트 리스너 추가
hammer.on('tap', function() {
  if (dropdownOpen) {
    // 드롭다운 메뉴가 열려있으면 닫음
    closeDropdown();
  } else {
    // 드롭다운 메뉴가 닫혀있으면 열음
    openDropdown();
  }
});

// 드롭다운 메뉴 열기 함수
function openDropdown() {
  const menu = dropdown.querySelector('.dropdown-menu');
  menu.style.display = 'block';
  dropdownOpen = true;
}

// 드롭다운 메뉴 닫기 함수
function closeDropdown() {
  const menu = dropdown.querySelector('.dropdown-menu');
  menu.style.display = 'none';
  dropdownOpen = false;
}

위의 코드에서는 Hammer.js를 사용하여 터치 이벤트를 감지하고, 해당 이벤트에 따라 드롭다운 메뉴를 열고 닫습니다. 드롭다운 메뉴의 상태를 추적하기 위해 dropdownOpen 변수를 사용합니다. 터치 이벤트에서 tap 이벤트를 사용하지만, 필요에 따라 swipe, press 등 다른 이벤트를 사용할 수도 있습니다.

위 코드를 실행하면, 드롭다운 메뉴가 터치 또는 클릭에 반응하여 열리고 닫히는 것을 확인할 수 있습니다. 이렇게 Hammer.js를 사용하면 모바일 기기와 터치 화면에서도 사용자 친화적인 드롭다운 메뉴를 구현할 수 있습니다.

참고 자료: