swipemenu.js

모바일웹에서 swipe menu가 필요할때사용.양쪽모두 swipe 이용가능

샘플영상

다운로드

swipemenu.js V1.0 다운로드

설치/사용법

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

<style>
    .side{background:#383838;}
</style>

<script>
    $(function(){
        $('#swipemenu').swipeMenu({
            type:1, 
            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>

 

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

 

 

 

 

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

<style>
    .side{background:#383838;}
</style>

<script>
    $(function(){
        $('#swipemenu').swipeMenu({
            type:1, 
            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>

 

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

 

 

 

 

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

<style>
    .side{background:#383838;}
</style>

<script>
    $(function(){
        $('#swipemenu').swipeMenu({
            type:1, 
            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>

 

3. 위와 같이 레이아웃을 구성합니다.

 

 

 

 

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

<style>
    .side{background:#383838;}
</style>

<script>
    $(function(){
        $('#swipemenu').swipeMenu({
            type:1, 
            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>

 

4. 페이지 로딩시 실행되는 스크립트에 다음과 같이 함수를 추가 합니다.

 

 

 

 

$('#swipemenu').swipeMenu({
            type:1,  // 1:양쪽, 2:왼쪽, 3:오른쪽
            speed:300, // 메뉴움직임 속도
            side_width:250 // 메뉴 폭
        });

 

5. 원하는 옵션을 설정 합니다.

 

 

 

 

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

잠시만 기다려주세요.