모바일용 회전메뉴 제이쿼리(jquery) 플러그인

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

그냥 개발자 블로그

모바일용 회전메뉴 제이쿼리(jquery) 플러그인 본문

소식/플러그인소식

모바일용 회전메뉴 제이쿼리(jquery) 플러그인

마음이파파 2015. 9. 21. 20:27

모바일웹은 화면이 좁아서 많은 메뉴를 넣기 애매할때가 자주 있죠.

그럴때 사용하면 좋은것이 회전메뉴인데요.

회전메뉴가 뭐냐구요? 아래 영상을 한번 보실게요.

이게 회전 메뉴에요.

회전메뉴를 통해서 좁은공간에도 많은 메뉴를 사용할수 있다는게 장점이죠.

그러나 구현이 복잡하다는게 단점인데요.

회전메뉴 단점을 극복하고자 제이쿼리(jquery) 플러그인을 만들었어요.

예제를 통해서 사용법을 살펴보면....

<style>

#button{width:40px; height:40px; border-radius:20px; position:absolute; right:5px; top:100px; color:#fff; line-height:40px; text-align:center; background:#ccc;}

#rotatemenu{position:absolute; width:240px; height:240px; right:-95px; display:block; opacity:0;}

#rotatemenu .rmlist{position:absolute; width:40px; height:40px; border-radius:20px; color:#fff; line-height:40px; text-align:center;}

#rotatemenu .rmlist a{font-size:14px; color:#fff;}

</style>

$(function(){

$('#roatatemenu').rotatemenu({

button:'#button',

angelspeed:700

});

</script>

<body>

</div>

</body>

우선 태그를 이렇게 작성해주었어요.

다른때 제이쿼리(jquery) 관련 포스팅보다 태그가 많은데요.

원형을 만들어야 하다보니 어쩔수 없었네요.

id적힌곳이 두개가 보이는데 는 원하는대로 적어주시면 되요.

단, rmlist는 필수 클래스명로 변경되어선 안되요.

<style>

#button{width:40px; height:40px; border-radius:20px; position:absolute; right:5px; top:100px; color:#fff; line-height:40px; text-align:center; background:#ccc;}

#rotatemenu{position:absolute; width:240px; height:240px; right:-95px; display:block; opacity:0;}

#rotatemenu .rmlist{position:absolute; width:40px; height:40px; border-radius:20px; color:#fff; line-height:40px; text-align:center;}

#rotatemenu .rmlist a{font-size:14px; color:#fff;}

</style>

$(function(){

$('#roatatemenu').rotatemenu({

button:'#button',

angelspeed:700

});

</script>

<body>

</div>

</body>

회전메뉴 제이쿼리(jquery) 플러그인 예제 태그도 어마어마 한데 필수는 딱히 없어요.

입맛대로 작성해주시면 되요.

아! 회전메뉴에 가장 밖은 opacity가 0 이되어야 겠네요.

<style>

#button{width:40px; height:40px; border-radius:20px; position:absolute; right:5px; top:100px; color:#fff; line-height:40px; text-align:center; background:#ccc;}

#rotatemenu{position:absolute; width:240px; height:240px; right:-95px; display:block; opacity:0;}

#rotatemenu .rmlist{position:absolute; width:40px; height:40px; border-radius:20px; color:#fff; line-height:40px; text-align:center;}

#rotatemenu .rmlist a{font-size:14px; color:#fff;}

</style>

$(function(){

$('#roatatemenu').rotatemenu({

button:'#button',

angelspeed:700

});

</script>

<body>

</div>

</body>

다운받은 플러그인을 연결해주시고요.

제이쿼리(jquery) 플러그인을 연결해주고요.

<style>

#button{width:40px; height:40px; border-radius:20px; position:absolute; right:5px; top:100px; color:#fff; line-height:40px; text-align:center; background:#ccc;}

#rotatemenu{position:absolute; width:240px; height:240px; right:-95px; display:block; opacity:0;}

#rotatemenu .rmlist{position:absolute; width:40px; height:40px; border-radius:20px; color:#fff; line-height:40px; text-align:center;}

#rotatemenu .rmlist a{font-size:14px; color:#fff;}

</style>

$(function(){

$('#roatatemenu').rotatemenu({

button:'#button',

angelspeed:700

});

</script>

<body>

</div>

</body>

docuemnt가 로딩이 완료되는 시점에

위와 같이 작성해주시면 되요.

옵션에 대한 설명은 아래를 참고하세요.

button : 스타트 버튼의 아이디 또는 클래스, 예제 영상과 같이 처음에 회전메뉴를 불러오는 버튼 역할을 해요.

anglespeed : 회전감도, 최대값 1000, 숫자가 클수록 회전 감도가 예민해져요.

회전메뉴 제이쿼리(jquery) 플러그인은 홈페이지에서

rotatemenu.js 를 다운로드 받아서 사용하실수 있어요~!

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

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

모바일웹에서 싸인을 받을수 있을까? 제이쿼리(jquery) (1)	2015.09.21
드래그앤드롭 제이쿼리(jquery) 플러그인 (0)	2015.09.21
공지용 레이어팝업 간단 구현 제이쿼리(jquery) 플러그인 (0)	2015.09.21
모바일웹에서 숨김메뉴 구현 제이쿼리(jquery) 플러그인 (0)	2015.09.21
sns공유하기 추가 제이쿼리 플러그인 (2)	2015.09.21

'소식/플러그인소식' Related Articles

그냥 개발자 블로그

모바일용 회전메뉴 제이쿼리(jquery) 플러그인 본문

모바일용 회전메뉴 제이쿼리(jquery) 플러그인

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

티스토리툴바