드랍다운 메뉴

모바일 웹, 반응형 웹에서 자주 사용하는 드랍다운 메뉴를 가이드 해봅니다.

슬라이드 메뉴 가이드 보러가기

사진으로만 보기엔 정적으로 보이겠지만, 가이드나 코드를 보시면 애니메이션으로 자연스럽게 드랍다운 되는 메뉴 입니다.

1. HTML 코드

Line 18 ~ 24 : Toolbar를 구성하는 메뉴입니다.

Line 19 : 메뉴를 호출하는 햄버거 버튼입니다.

Line 27 ~ 30 : 슬라이딩 된 드랍다운 메뉴를 구성하는 메뉴 레이아웃입니다. 필요시에 이안에 레이아웃을 구성하세요.

Line 33 ~ 36 : 메뉴가 호출되면 사용자 편리를 위해, 또는 자연스러운 레이아웃 구성을 위해 호출되는 반 투명의 커버 화면입니다. 평소에는 보이지 않지만 메뉴가 호출되면 보이게 되며, 사용자가 커버를 눌러도 메뉴가 사라지게 됩니다.

2. CSS

Line 45 ~ 76 : 메뉴를 구성하는 CSS 들입니다.

Line 45 ~ 56 : 슬라이드 메뉴 부분입니다.

Line 66 ~ 76 : 슬라이드가 호출되면 나타나는 반투명 커버 입니다.

중요한점

Line23, Line28

Line23 : position 속성이 없으면 z-index의 우선순위를 높게 줘도 우선순위가 반영이 안되는 문제로 속성을 추가했습니다.

Line28 : 우선순위를 드랍다운 메뉴부분과 커버보다 높게 줘서 드랍다운 될 때 애니메이션이 툴바 위로 지나가지 않게 하기 위함입니다.

3. Script

Line 2 ~ 5 : 메뉴 호출 버튼입니다. Toolbar에 있는 햄버거 버튼을 누르면 showMenu 함수가 호출됩니다.

Line 7 ~ 18 : 메뉴가 호출되면 애니메이션 효과와 함께 position:absolute 속성으로 잡혀있는 슬라이드 메뉴가 위에에서 나타나게 됩니다. 애니메이션 효과가 끝나게 되면 반투명 커버가 나타나게 됩니다.

Line 20 ~ 33 : 반투면 커버를 누르거나 슬라이딩 메뉴의 닫기 버튼을 누르게 되면 hideMenu 함수가 호출되며 애니메이션 효과와 함께 메뉴가 위로 사라지게 됩니다. 애니메이션이 끝나면 반투명 커버가 사라지게 됩니다.

#반응형웹메뉴#모바일웹메뉴#드랍다운메뉴