Apple Style Burger menu 만들기

clone coding 해볼 대상은 위 gif 와 같이 apple 모바일 버전의 웹에 볼 수 있는 burger menu 이다.

우선 간단히 생각했을때 2개의 bar 를 만들고 click event handler 로 class 를 toggle 하면 된다.

toggle 하는 class 는 tranform 속성으로
위의 bar 는 아래로 위치 이동, 반시계 방향으로 45도로 설정,
아래의 bar 는 위로 위치 이동, 시계 방향으로 45도로 설정하였다.

간단하게 위와 같은 결과물을 구현할 수 있었다. 하지만 apple style burger menu 와 디테일한 차이가 있다. bar 가 먼저 위치 이동을 한 뒤에 각도가 변경되어야한다.

apple 사이트의 burger menu 를 분석한 결과 다음과 같은 수정사항이 생겼다.

• bar 의 이동과 회전은 모두 tranform 이기에 transition 을 나눠서 할 수가 없다. 따라서 wrapper 를 통해서 이동을 별개로 구현해야한다.
• 접힐 때와 펼 때의 transition 이 달라지므로 구분할 수 있는 방법이 있어야한다.
  • 접힐 때는 위치 이동 후 회전
  • 펼 때는 회전 후 위치 이동
  • 보이지 않는 checkbox type의 input을 생성한 뒤 check 됐을 때 다른 class 를 적용한다.

비슷한 결과를 얻을 수 있었다. burger menu click 시 JS 에서 input 값 변경에 0.1s 정도 시간의 여유를 주었는데 접히는 동안 class 가 변경되면 안 되기 때문이다. apple 웹 사이트의 경우 소수점 4자리까지 시간을 설정했는데 이를 염두해둔 코딩인 것 같다고 추측된다.