그냥 개발자 블로그

모바일웹에서 swipe menu 구현 제이쿼리(jquery) 플러그인 본문

소식/플러그인소식

모바일웹에서 swipe menu 구현 제이쿼리(jquery) 플러그인

마음이파파 2015. 9. 21. 15:37



2016/08/03 - [Jquery] - swipemenu.js 플러그인 - 모바일웹 좌우 슬라이드 메뉴 효과






한동안 바빠서 자작 제이쿼리 플러그인 공유가 늦었네요.

이번에 소개할 제이쿼리(jquery) 플러그인은 swipe 형식의 모바일 메뉴인데요.

최근 많이 디자인 될뿐만 아니라 많이 사용되는 형태이죠.


swipe는 모바일에서 손으로 화면을 밀어내어 동작하는걸 말하며 메뉴 말고도 모바일에 슬라이드 메뉴를 표현해야 할때도 많이 사용되요.





 

[swipemenu.js 샘플 영상]




여러분도 위와 같은 기능이 필요하다면 jquery plugin을 통해서 쉽게 구현 할수 있는데요.


우선 여기 사이트로 이동하셔서 Plugin Share 라는 메뉴로 들어가서 swipemenu.js를 찾아 다운받으세요.

다운 받은 zip 파일을 압축을 풀어 그 안에 있는 swipemenu.js를 원하는 위치에 넣어주세요.








<style>

.side{background:#383838;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="swipemenu.js"></script>


<script>

$(function(){

$('#swipemenu').swipeMenu({

type:1, //1:양쪽,2:왼쪽,3:오른쪽

speed:300. //메뉴가 나오고 들어가는 속도

side_width:250 //사이드 메뉴 넓이

});

});

</script>


<body>

<div id="swipemenu">

<div class='container'>

<dl>

<dd class='side'><!-- 왼쪽 메뉴 --></dd>

<dd class='center'><!-- 메인페이지 --></dd>

<dd class='side'><!-- 오른쪽 메뉴 --></dd>

</dl>

</div>

</div>

</body> 


swipemenu.js 파일을 원하는 곳으로 불러와주세요.








<style>

.side{background:#383838;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="swipemenu.js"></script>


<script>

$(function(){

$('#swipemenu').swipeMenu({

type:1, //1:양쪽,2:왼쪽,3:오른쪽

speed:300. //메뉴가 나오고 들어가는 속도

side_width:250 //사이드 메뉴 넓이

});

});

</script>


<body>

<div id="swipemenu">

<div class='container'>

<dl>

<dd class='side'><!-- 왼쪽 메뉴 --></dd>

<dd class='center'><!-- 메인페이지 --></dd>

<dd class='side'><!-- 오른쪽 메뉴 --></dd>

</dl>

</div>

</div>

</body> 



swipemenu를 사용하기 위한 html 형태는 위와 같으며 별도의 css는 필요치 않아요. 플러그인 내에서 style을 만들어 적용시켜 주거든요.







 


<style>

.side{background:#383838;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="swipemenu.js"></script>


<script>

$(function(){

$('#swipemenu').swipeMenu({

type:1, //1:양쪽,2:왼쪽,3:오른쪽

speed:300. //메뉴가 나오고 들어가는 속도

side_width:250 //사이드 메뉴 넓이

});

});

</script>


<body>

<div id="swipemenu">

<div class='container'>

<dl>

<dd class='side'><!-- 왼쪽 메뉴 --></dd>

<dd class='center'><!-- 메인페이지 --></dd>

<dd class='side'><!-- 오른쪽 메뉴 --></dd>

</dl>

</div>

</div>

</body> 

 

$(function) 또는 $(document).ready 안에 위와 같이 작성해주세요. 
여기서 type항목은 필수로 1,2,3 중에 하나는 반드시 써줘야 하고요. speed와 side_width 는 안써주셔도 되는데 안 쓸경우 jquery plugin 내에 설정된 기초값이 적용되요.(speed:300, side_width:250)







저작자표시 비영리 변경금지

'소식 > 플러그인소식' 카테고리의 다른 글

소스 코드 보호 제이쿼리(jquery) 플러그인  (0) 2015.09.21
쇼핑몰 스카이배너 구현 제이쿼리 플러그인(jquery plugin)  (0) 2015.09.21
링크(href) 미리보기 기능 jquery plugin(제이쿼리 플러그인)  (0) 2015.09.21
탭 메뉴 만들기 jquery plugin (제이쿼리 플러그인)  (0) 2015.09.21
책장 넘기는 효과 제이쿼리(jquery) 플러그인  (0) 2015.09.21
'소식/플러그인소식' Related Articles more