[워크식스] 웹디자인기능사 실기 (드롭다운 메뉴)

드롭다운 메뉴는 많이 사용되는 기법중에 하나임으로 시험에서도 충분히 나올수 있는 문제 입니다. 

css 스타일을 통해서도 드롭다운을 만들수 있지만, 블라인드가 열리고 닫히듯이 부드럽게 열리고 동작하게 할수도 있습니다.

이번 글에서는 부드럽게 열리고 닫히는 드롭다운 메뉴 기법을 다루겠습니다.

jquery에서는 고맙게도 slidDown과 slideUp이라는 함수를 제공하여 쉽게 만들수 있습니다.

아래 영상은 위 내용을 바탕으로 실제 드롭다운 메뉴를 제작하는 과정을 녹화하였습니다.

(유튜브에서 더욱 큰 화면으로 보실 수 있습니다.)

샘플코드

sample.zip

관련글

2017/08/28 - [IT] - [워크식스] 웹디자인기능사 실기 (모달편)

2017/08/24 - [IT] - [워크식스] 웹디자인기능사 실기 (좌우 슬라이드편)

2017/08/24 - [IT] - [워크식스] 웹디자인기능사 실기 (드롭다운 메뉴)

2017/08/18 - [IT] - [워크식스] 웹디자인기능사 실기 (좌로 흘러가는 슬라이드 편)

2017/08/16 - [IT] - [워크식스] 웹디자인기능사 실기 (디버깅편)

2017/08/16 - [IT] - [워크식스] 웹디자인기능사 실기 (퍼블리싱편)

2017/08/16 - [IT] - [워크식스] 웹디자인기능사 실기 (디자인편)

copyright ⓒ 2017. 워크식스