모바일 웹, 반응형 웹에서 자주 사용하는 슬라이딩 되는 슬라이드 메뉴를 가이드 해봅니다.
사진으로만 보기엔 정적으로 보이겠지만, 가이드나 코드를 보시면 애니메이션으로 자연스럽게 슬라이딩 되는 메뉴 입니다.
1. HTML 코드
Line 18 ~ 24 : Toolbar를 구성하는 메뉴입니다.
Line 19 : 메뉴를 호출하는 햄버거 버튼입니다.
Line 27 ~ 30 : 슬라이딩 된 메뉴를 구성하는 메뉴 레이아웃입니다. 필요시에 이안에 레이아웃을 구성하세요.
Line 33 ~ 36 : 메뉴가 호출되면 사용자 편리를 위해, 또는 자연스러운 레이아웃 구성을 위해 호출되는 반 투명의 커버 화면입니다. 평소에는 보이지 않지만 메뉴가 호출되면 보이게 되며, 사용자가 커버를 눌러도 메뉴가 사라지게 됩니다.
2. CSS
Line 43 ~ 75 : 메뉴를 구성하는 CSS 들입니다.
Line 43 ~ 55 : 슬라이드 메뉴 부분입니다.
Line 65 ~ 75 : 슬라이드가 호출되면 나타나는 반투명 커버 입니다.
3. Script
Line 2 ~ 5 : 메뉴 호출 버튼입니다. Toolbar에 있는 햄버거 버튼을 누르면 showMenu 함수가 호출됩니다.
Line 7 ~ 18 : 메뉴가 호출되면 애니메이션 효과와 함께 position:absolute 속성으로 잡혀있는 슬라이드 메뉴가 왼쪽에서 나타나게 됩니다. 응용하시면 오른쪽에서 슬라이딩 되는 메뉴를 구성 할 수 있습니다. 애니메이션 효과가 끝나게 되면 반투명 커버가 나타나게 됩니다.
Line 20 ~ 33 : 반투면 커버를 누르거나 슬라이딩 메뉴의 닫기 버튼을 누르게 되면 hideMenu 함수가 호출되며 애니메이션 효과와 함께 메뉴가 왼쪽에서 사라지게 됩니다. 애니메이션이 끝나면 반투명 커버가 사라지게 됩니다.
다음엔 슬라이드 메뉴 말고 자주 사용하는 드랍다운 메뉴를 가이드 해보겠습니다.
#반응형웹메뉴#모바일웹메뉴#슬라이드메뉴#슬라이딩메뉴
'개발 > HTML, CSS, Script' 카테고리의 다른 글
| FACEBOOK SDK - 로그인, 정보 가져오기 SCRIPT (0) | 2017.10.23 |
|---|---|
| 드랍다운 메뉴 (0) | 2017.09.30 |
| 이미지 반복 롤링 배너 (7) | 2017.09.24 |
| [Part2] Jquery 다중 파일 업로드 미리보기 제공하기, 삭제, POST업로드 (37) | 2017.08.06 |
| [Part1] Jquery 파일 업로드시 미리보기 제공하기, 다중 파일 업로드 미리보기 제공하기 (18) | 2017.05.15 |
