햄버거 메뉴 모양에서 X 모양으로 변하는 버튼 예제

Alpinejs 와 Tailwindcss 프레임워크를 이용한 모바일 메뉴 등에서 자주 사용하는 햄버거 메뉴 버튼 예제입니다.

이 예제는 코드를 입력하고 저장만 하면 바로 퍼블리싱 되는 Essepage 에서 테스트해볼 수 있도록 기록합니다.

1. 라이브러리 설치

알파인js와 테일윈드css를 사용할 수 있게 essepage:head 를 이용해 Essepage 에 불러옵니다.

<essepage:head>
  <script src="https://unpkg.com/alpinejs" defer></script>
  <script src="https://cdn.tailwindcss.com"></script>
</essepage:head>

2. 버튼 코드

<button class="w-10 h-10 relative focus:outline-none bg-transparent" x-data="{open:!1}" @click="open = !open">
  <div class="block w-5 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
    <span class="block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out" :class="{'rotate-45': open, '-translate-y-1.5': !open }"></span>
    <span class="block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out" :class="{'opacity-0': open }"></span>
    <span class="block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out" :class="{'-rotate-45': open, 'translate-y-1.5': !open}"></span>
  </div>
</button>

3. 스타일 바꾸기

- 버튼 색깔

오렌지 색상으로 바꿔보는 코드. 테일윈드의 text-orange-500을 button 에 삽입해서 바꿀 수 있습니다.

<button class="text-orange-500 ...">
  <!-- ... -->
</button>

Taiwindcss 의 다른 색상은 다음 페이지에서 볼 수 있습니다. 테일윈드CSS 색상표

- 버튼 선 굵기

span 코드 안의 h-0.5 부분을 바꾸면 굵기를 변경할 수 있습니다.

Tailwindcss 의 height 와 관계된 값은 다음 페이지에서 볼 수 있습니다. 테일윈드CSS Height

- 버튼 선 사이 간격

span 코드 안의 translate-y 값들을 변경해서 선 사이 간격을 조절할 수 있습니다.

Tailwindcss 의 translate-y 와 관계된 값은 다음 페이지에서 볼 수 있습니다. 테일윈드CSS transalte-y