jQuery 슬라이드 메뉴



제이쿼리 슬라이드메뉴


제이쿼리 슬라이드 메뉴를 한번 만들어 보았습니다..

if문과 jQuery animate를 이용해서 

메뉴를 열렸다 펼쳤다 하는 슬라이드 메뉴입니다.


etc-image-0


JS 코드를 설명드리자면 ..

버튼을 클릭 하면 만약 num이 0보다 크면 위에 있는 animate를 실행

그렇지 않으면 아래 있는 animate를 실행.. 





최초 제이쿼리 슬라이드 메뉴 실행화면

etc-image-1


닫힘버튼을 눌렀을때 슬라이드 메뉴가 사라지면서 메뉴명이

열림 버튼으로 변경됩니다.

etc-image-2



코드를 보시면 아시겠지만 width 값을 변수에 담고 그 값을

호출해오는 방식을 사용하였는데 .. 클릭했을때 좌표가 ( 마이너스 - )값이 들어가니

저는 당연히 그러면 if문의 조건 값이 달라지겠지? 라는 멍청한 생각을..

하면서 왜 안될까 라는 고민을 했습니다..


머, 그렇습니다.. 별거 없긴한데 ... 사실 삽질좀했습니다.. 

만든지는 몇일 된듯 한데 ... 이제서야 올립니다.


혹시 다른 의견이 있으시면 댓글 달아주세요 ~



'개발연습막쓰기 > jQuery' 카테고리의 다른 글

jQuery 의 사상  (0) 2018.09.03
이미지 체인지 관련  (0) 2018.05.16
이미지 갤러리  (0) 2018.02.06
아코디언 메뉴만들기  (0) 2018.02.05
제이쿼리 이벤트 구분  (0) 2018.02.04