jQuery 슬라이드 메뉴



제이쿼리 슬라이드메뉴


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

if문과 jQuery animate를 이용해서 

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



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

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

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


See the Pen XEbZEL by uicode (@uicode) on CodePen.




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


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

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



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

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

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

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


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

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


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



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

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