그냥 개발자 블로그

swipemenu.js 플러그인 - 모바일웹 좌우 슬라이드 메뉴 효과 본문

소식/플러그인소식

swipemenu.js 플러그인 - 모바일웹 좌우 슬라이드 메뉴 효과

마음이파파 2016. 8. 3. 00:19





 



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

<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. 원하는 옵션을 설정 합니다.




6. 소스는 여기에서 다운로드 받을수 있습니다.




[문의하기]


copyright ⓒ 2017. 워크식스


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

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

bookmark.js - 스마트폰으로 홈페이지 방문시 바탕화면에서 바로가기 아이콘 자동추가  (0) 2017.02.19
tabMaker.js 플러그인 - 탭 메뉴를 쉽게 만들어 주는 플러그인  (0) 2016.08.09
book.js 플러그인 - 책 넘기는 효과  (0) 2016.08.03
pgpopup.js - 잠깐 나타났다 사라지는 팝업 플러그인  (0) 2016.08.02
dropdownbanner.js - 쇼핑몰 상단배너 플러그인  (2) 2016.08.02
'소식/플러그인소식' Related Articles more