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


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


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








이게 회전 메뉴에요.


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


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


회전메뉴 단점을 극복하고자 제이쿼리(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>


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

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


<script>

$(function(){

$('#roatatemenu').rotatemenu({

button:'#button',

angelspeed:700

});

});

</script>


<body>

<div id="rotatemenu">

<div class="rmlist" style="background:red; left:100px; top:5px;"><a href="#">1</a></div>

<div class="rmlist" style="background:green; left:100px; bottom:5px;"><a href="#">5</a></div>

<div class="rmlist" style="background:red; right:5px; top:100px;"><a href="#">3</a></div>

<div class="rmlist" style="background:green; left:5px; top:100px;"><a href="#">7</a></div>

<div class="rmlist" style="background:red; left:35px; top:35px;"><a href="#">8</a></div>

<div class="rmlist" style="background:green; right:35px; top:35px;"><a href="#">2</a></div>

<div class="rmlist" style="background:red; left:35px; bottom:35px;"><a href="#">6</a></div>

<div class="rmlist" style="background:green; left:35px; bottom:35px;"><a href="#">4</a></div>

</div>


<div id="button">Menu</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>


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

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


<script>

$(function(){

$('#roatatemenu').rotatemenu({

button:'#button',

angelspeed:700

});

});

</script>


<body>

<div id="rotatemenu">

<div class="rmlist" style="background:red; left:100px; top:5px;"><a href="#">1</a></div>

<div class="rmlist" style="background:green; left:100px; bottom:5px;"><a href="#">5</a></div>

<div class="rmlist" style="background:red; right:5px; top:100px;"><a href="#">3</a></div>

<div class="rmlist" style="background:green; left:5px; top:100px;"><a href="#">7</a></div>

<div class="rmlist" style="background:red; left:35px; top:35px;"><a href="#">8</a></div>

<div class="rmlist" style="background:green; right:35px; top:35px;"><a href="#">2</a></div>

<div class="rmlist" style="background:red; left:35px; bottom:35px;"><a href="#">6</a></div>

<div class="rmlist" style="background:green; left:35px; bottom:35px;"><a href="#">4</a></div>

</div>


<div id="button">Menu</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>


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

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


<script>

$(function(){

$('#roatatemenu').rotatemenu({

button:'#button',

angelspeed:700

});

});

</script>


<body>

<div id="rotatemenu">

<div class="rmlist" style="background:red; left:100px; top:5px;"><a href="#">1</a></div>

<div class="rmlist" style="background:green; left:100px; bottom:5px;"><a href="#">5</a></div>

<div class="rmlist" style="background:red; right:5px; top:100px;"><a href="#">3</a></div>

<div class="rmlist" style="background:green; left:5px; top:100px;"><a href="#">7</a></div>

<div class="rmlist" style="background:red; left:35px; top:35px;"><a href="#">8</a></div>

<div class="rmlist" style="background:green; right:35px; top:35px;"><a href="#">2</a></div>

<div class="rmlist" style="background:red; left:35px; bottom:35px;"><a href="#">6</a></div>

<div class="rmlist" style="background:green; left:35px; bottom:35px;"><a href="#">4</a></div>

</div>


<div id="button">Menu</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>


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

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


<script>

$(function(){

$('#roatatemenu').rotatemenu({

button:'#button',

angelspeed:700

});

});

</script>


<body>

<div id="rotatemenu">

<div class="rmlist" style="background:red; left:100px; top:5px;"><a href="#">1</a></div>

<div class="rmlist" style="background:green; left:100px; bottom:5px;"><a href="#">5</a></div>

<div class="rmlist" style="background:red; right:5px; top:100px;"><a href="#">3</a></div>

<div class="rmlist" style="background:green; left:5px; top:100px;"><a href="#">7</a></div>

<div class="rmlist" style="background:red; left:35px; top:35px;"><a href="#">8</a></div>

<div class="rmlist" style="background:green; right:35px; top:35px;"><a href="#">2</a></div>

<div class="rmlist" style="background:red; left:35px; bottom:35px;"><a href="#">6</a></div>

<div class="rmlist" style="background:green; left:35px; bottom:35px;"><a href="#">4</a></div>

</div>


<div id="button">Menu</div>

</body>

 




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

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


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


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

 

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

 

 




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


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







+ Recent posts