rotatemenu.js

플러그인 사용을 위해선 도메인을 등록해야 합니다.
플러그인을 설치할 사이트의 도메인을 등록 후 사용법에 따라 이용해 주세요.

rotatemenu.js

모바일웹에서 회전메뉴를 쉽게 구현하게 해주는 플러그인

사용법

<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="//work6.kr/plugin/plugin_link/13"></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>

 

 

 

 

설치방법

 

1. Line21 ~ 33 : 예제 html을 복사 그리고 붙여넣기 합니다.


2. Line2 ~ 5 : 예제 스타일을 복사 그리고 붙여넣기 합니다.


3. Line8 : 제이쿼리를 설치 및 연결 합니다.


4. Line9 : 플러그인 사용하기 후 도메인을 등록 합니다. 코드를 복사 그리고 붙여넣기 합니다.


5. Line13 ~ 16 : 스크립트를 복사 그리고 붙여넣기 합니다.

 

 

 
 
 
 
 
Install
 

1. Line21 ~ 33 : Copy and paste the example html.


2. Line2 ~ 5 : Copy and paste the example style.


3. Line8 : Install and connect JQuery.


4. Line9 : Register the domain after using the plug-in. Copy and paste code.


5. Line13 ~ 16 : Copy and paste the script.