스마트폰이나 태블릿과 같은 모바일 기기에서 사용자가 터치 제스처를 사용하여 메뉴를 열고 닫을 수 있는 기능을 구현하려면 Hammer.js 라이브러리를 사용할 수 있습니다. Hammer.js는 제스처 이벤트를 쉽게 처리할 수 있는 오픈 소스 JavaScript 라이브러리입니다.

Hammer.js 설치

Hammer.js를 사용하기 위해 먼저 해당 라이브러리를 설치해야 합니다.

npm install hammerjs

파일을 직접 다운로드하여 사용할 수도 있습니다. Hammer.js 다운로드 페이지에서 다운로드할 수 있습니다.

HTML 마크업

HTML 파일에는 메뉴 컨테이너와 메뉴 아이템을 구성해야 합니다. 메뉴 컨테이너는 모바일 메뉴의 전체 영역을 감싸고 있으며, 메뉴 아이템은 실제 메뉴 항목을 나타냅니다.

<div id="menu-container">
  <div class="menu-item">메뉴 항목 1</div>
  <div class="menu-item">메뉴 항목 2</div>
  <div class="menu-item">메뉴 항목 3</div>
</div>

JavaScript 코드

구현해야 할 JavaScript 코드는 Hammer.js를 초기화하고 제스처 이벤트를 수신하여 메뉴의 열기와 닫기 동작을 처리하는 부분입니다.

// Hammer.js 초기화
var menuContainer = document.getElementById('menu-container');
var hammer = new Hammer(menuContainer);

// 메뉴 열기 및 닫기 이벤트 처리
hammer.on('swipeleft', function() {
  menuContainer.classList.add('menu-open');
});

hammer.on('swiperight', function() {
  menuContainer.classList.remove('menu-open');
});

이 코드는 메뉴 컨테이너 엘리먼트를 가져오고, Hammer 객체를 생성한 후 swipeleft와 swiperight 이벤트에 대한 핸들러를 등록하는 역할을 합니다. swipeleft 이벤트가 발생하면 메뉴 컨테이너에 menu-open 클래스를 추가하여 메뉴를 열고, swiperight 이벤트가 발생하면 menu-open 클래스를 제거하여 메뉴를 닫습니다.

CSS 스타일링

메뉴 컨테이너와 메뉴 아이템을 스타일링하여 원하는 모양과 레이아웃을 적용할 수 있습니다. 아래는 간단한 스타일링 예제입니다.

#menu-container {
  width: 200px;
  height: 100vh;
  background-color: #f1f1f1;
  transition: transform 0.3s;
  transform: translateX(-200px);
}

#menu-container.menu-open {
  transform: translateX(0);
}

.menu-item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

.menu-item:hover {
  background-color: #ccc;
}

이 스타일은 메뉴 컨테이너를 왼쪽으로 200px 이동하여 숨겨두고, menu-open 클래스가 추가되면 원래 위치로 이동하여 메뉴를 보여줍니다. 메뉴 아이템은 각각 적절한 패딩과 테두리를 가지고 있으며, 마우스를 올리면 배경색이 변경됩니다.

이제 Hammer.js를 사용하여 모바일 메뉴를 구현하는 방법에 대해 알아보았습니다. 이를 활용하여 사용자 친화적이고 직관적인 인터페이스를 제공할 수 있습니다. 더 자세한 정보는 Hammer.js 공식 문서를 참조하시기 바랍니다.