rotatemenu.js

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

샘플영상

다운로드

rotatemenu.js V1.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="/js/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>

 

1. 제이쿼리를 설치가 필요 합니다.


 

 

 

<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="/js/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>

 

2. 다운로드 받은 플러그인을 설치 합니다.

 

 

 

 

<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="/js/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>

 

3. 기본 레이아웃을 작성 합니다.

 

 

 

 

<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="/js/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>

 

4. 자동으로 실행 될 수 있도록 함수를 작성 합니다.

 

 

 

 

$('#roatatemenu').rotatemenu({
            button:'#button', //회원 메뉴 아이디 또는 클래스
            angelspeed:700 //회전 속도
});

 

5. 필요한 옵션을 설정 합니다.

 

 

 

 

* 플러그인 설치는 지원하지는 않습니다.
위로

잠시만 기다려주세요.