모바일 좌우 슬라이드 메뉴 - mobail jwau seullaideu menyu

네이버(http://m.naver.com) 이나 다음(http://m.daum.net)의 모바일버전을 보면

메인메뉴 영역을 스와이프해서 전체 메뉴를 훑을 수 있게 만들어졌다.

이 기능을 만들어 보고자 개발자 모드로 확인하였더니 css의 transform, transition 등을 이용해서 만든 것으로 보였다.

그래서 나는 trans관련 css와 함께 스와이프 동작을 인식해야하므로 jquery의 touchstart, touchmove, touchend를 이용해서 만들었다.

참고로 touchstart, touchmove, touchend는 마우스로는 작동이 안되고 핸드폰에서만 작동하는 것을 확인하였다.

jQuery

[mobile/jQuery] 모바일 사이드 메뉴 슬라이드 하면서 나오기!!

제이쿼리를 왕초보 단계라 기록의 목적으로 남깁니다ㅋ

HTML

</ul>

</div>

$(document).ready(function(){

$('#menu_open').click(function(){

$('#side_menu').animate({left:'0'}, 500);

});

$('#menu_close').click(function(){

$('#side_menu').animate({left:'-250px'}, 500);

});

</script>

적용시키면,

#menu_open 클릭시 #side_menu 왼쪽에서 미끄러져 나옵니다.

#menu_close 클릭시 #side_menu 왼쪽으로 미끄러져 들어갑니다.

(animate 내부에 500값은 0.5초를 의미합니다.)

#side_menu에 style="left:-250px"를 넣어주면

처음 로딩했을때 안보입니다^^ (-250px인 이유는 메뉴 넓이를 250으로 했기 때문입니다.)

왕초보 화이팅~~*

모바일 롯데월드 홈페이지에서 상단 왼쪽의 메뉴 버튼을 클릭하여서 전체 메뉴가 보여질 때에 좌에서 우로 슬라이드되면서 보여지는 것 같아서 이와 유사하게 보여지는 메뉴 기능을 개발해 보았습니다.

jQuery 로 모바일 메뉴 클릭시 메뉴가 좌에서 우로 슬라이드되면서 보여주는 소스 코드 예제는 다음과 같습니다.

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .menu_bg { width: 100%; height: 2000px; position: fixed; top:0px; left:0px; overflow: hidden; display: none; } .menu { position:absolute; top:0px; left:0px; width:100%; height: 100%; background-color:#DDD; } .menu > div { padding: 2%; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> var giMenuDuration = 700; // 전체 메뉴를 오른쪽으로 슬라이드하여서 보여준다. function ShowMenu(){ $('.menu_bg' ).css( { 'display' : 'block' } ); $('.menu' ).css( { 'left' : '-100%' } ); $('.menu' ).animate( { left: '0px' }, { duration: giMenuDuration } ); } // 전체 메뉴를 왼쪽으로 슬라이드하여서 닫는다. function HideMenu(){ $('.menu' ).animate( { left: '-100%' }, { duration: giMenuDuration, complete:function(){ $('.menu_bg' ).css( { 'display' : 'none' } ); } } ); } // 확장 메뉴를 보여주거나 닫는다. function ShowSubMenu( strId ){ var lySubMenu = $( strId ); if( lySubMenu.first().is( ":hidden" ) ){ $( strId ).slideDown( 300 ); } else{ $( strId ).slideUp( 300 ); } } $( document ).ready( function() { $('.menu_2' ).hide(); } ); </script> </head> <body> <img src="img/m_gnb_btn.png" width="25" height="17" onclick="ShowMenu()"> <div class="menu_bg"> <div class="menu"> <div style="width:96%;text-align:right" onclick="HideMenu()">닫기</div> <div> 메뉴 1 <button onclick="ShowSubMenu('#sub1')">+</button> <div class="menu_2" id="sub1"> <div>메뉴 1-1</div> <div>메뉴 1-2</div> </div> </div> <div>메뉴 2</div> </div> </div> </body> </html>

위의 소스 코드를 실행한 간단한 테스트 동영상은 다음과 같습니다.

#터치슬라이드메뉴 #모바일터치슬라이드 #모바일메뉴 #터치슬라이드

제일 많이 쓰이는게, idangerus swiper입니다.

모바일 메뉴 구현은 터치슬라이드 라이브러리를 사용한다.

정리를 해보면 1,2,3의 방법 정도로 축소되는데...

swiperjs를 사용하는 방법이 가장 간편해보인다.;;

?번은 거리별? 방향별? 직접 터치 이벤트를 만들어줘야하고.

9번은 모바일에서만 지원된다. (__);

1) swiper.js (138KB)

2) sly (19KB)

3) slick (42KB)

4) owl.carousel

개인적으로는 이 4개가 가장 쓸만한듯 합니다.

1) Swiper.js (구 idangero.us)

https://swiperjs.com/

https://github.com/nolimits4web/swiper/releases

naver 네이버 모바일 메뉴 슬라이드 스크롤(그냥저냥)

https://deorudth.tistory.com/106

https://foodchain.tistory.com/66

https://xetown.com/topics/1050810

https://swiperjs.com/get-started/

https://ux.stories.pe.kr/141

- 현재 가장 모던한 모바일 터치 슬라이더

- swipe 플러그인을 이용하여 만들어짐.

- 출처 네이버 하코사.

- 네이버 모바일 메뉴바

단 페이지를 넘기면 위 메뉴도 따라 움직여야하는데 페이지만 슬라이드로 넘어가고 메뉴는 그대로 있네요

> Centered Slides 데모를 보면 잘 되는거 같다.

2) sly (개인적으론 이거 픽!)

https://darsa.in/sly/

https://darsa.in/sly/examples/horizontal.html

3) slick

https://kenwheeler.github.io/slick/

------------------------------------------------------------------

4) flipsnap.js - 좀더 쉽고 가벼움

http://hokaccha.github.io/js-flipsnap/demo.html

5) jssor - Responsive Touch Slider / Gallery / Carousel / Banner / Slideshow html

http://www.jssor.com/

6) touchSwipe 터치슬라이드

TouchSwipe

http://labs.rampinteractive.co.uk/touchSwipe/demos/

https://m.blog.naver.com/PostView.nhn?blogId=accond&logNo=220632007381&proxyReferer=https:%2F%2Fwww.google.com%2F

좌표값을 이용해서 이벤트를 주는 방식.

7) jquery.touchSlider.js / Flick Navigation (jQuery.touchSlider, dohoons)

https://dohoons.com/test/flick/

https://github.com/dohoons/jquery.touchSlider

8) jQuery 모바일용 터치슬라이드 플러그인 Swiper 39종

https://m.blog.naver.com/PostView.nhn?blogId=arman52&logNo=221061061165&proxyReferer=https:%2F%2Fwww.google.com%2F

9) 터치 이미지 슬라이드 관련 참고 자료

https://hohoya33.tistory.com/54

10) 모바일 전용 터치슬라이드 (유진) - PC는 안됨.

https://codepen.io/retsugo/pen/JjYyKVP

https://hplayground.tistory.com/84

11) 모바일 터치 슬라이드바

https://kararico.tistory.com/54

--------------------------------

9. [X]슬라이드 메뉴 만들기

https://codepen.io/biggerbig/pen/QNayZw

10. [X]우측 슬라이드 메뉴 심플 사이드바

https://c10106.tistory.com/26

11.[X]제이쿼리를 이용해 슬라이드 메뉴 만들기

https://brilliantcoding.tistory.com/entry/Jquery-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EB%A9%94%EB%89%B4-%EB%A7%8C%EB%93%A4%EA%B8%B0

12. [X] 모바일 터치 슬라이드 사이드바

https://codepen.io/soydany/pen/WqzoWZ

---------------------------------------

※기타 워크식스 - 다운로드불가

7. touchmovemenu.js

https://blog.work6.kr/290?category=786396

워크식스 쪽 스크립트는 도메인을 등록해서 사용한다. 즉 해당 코드를 소스 안에 포함시킬 수 없다.

즉 배포본으로는 사용 불가라는 뜻..

8. swipemenu.js

https://blog.work6.kr/262

워크식스는 자바스크립트 소스가 다운로드 불가입니다.

#슬라이드 #터치슬라이드