PLUGIN

touchmovemenu.js

모바일 가로 사이즈를 초과하는 메뉴에 슬라이드 기능을 추가해주는 플러그인

사용법

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

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

 

<style>
ul,li{list-style:none;padding:0;margin:0;}
li{float:left;padding:0 10px;}
.container{width:100%; overflow:hidden;}
#slide_menu{width:2000px;}
</style>


<div class="container">
    <div id="slide_menu">
        <ul>
            <li><a href="#">다이얼미싱</a></li>
            <li><a href="#">전자미싱</a></li>
            <li><a href="#">이노비스</a></li>
            <li><a href="#">퀼트미싱</a></li>
            <li><a href="#">자수미싱</a></li>
            <li><a href="#">오버록미싱</a></li>
            <li><a href="#">컴퓨터자수기</a></li>
            <li><a href="#">스캔앤컷</a></li>
            <li><a href="#">기타</a></li>
        </ul>
    </div>
</div>


<script type="text/javascript">
$(function(){
    $('#slide_menu').touchMoveMenu();
});
</script>

 

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

 

 

 

 

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

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

 

<style>
ul,li{list-style:none;padding:0;margin:0;}
li{float:left;padding:0 10px;}
.container{width:100%; overflow:hidden;}
#slide_menu{width:2000px;}
</style>


<div class="container">
    <div id="slide_menu">
        <ul>
            <li><a href="#">다이얼미싱</a></li>
            <li><a href="#">전자미싱</a></li>
            <li><a href="#">이노비스</a></li>
            <li><a href="#">퀼트미싱</a></li>
            <li><a href="#">자수미싱</a></li>
            <li><a href="#">오버록미싱</a></li>
            <li><a href="#">컴퓨터자수기</a></li>
            <li><a href="#">스캔앤컷</a></li>
            <li><a href="#">기타</a></li>
        </ul>
    </div>
</div>


<script type="text/javascript">
$(function(){
    $('#slide_menu').touchMoveMenu();
});
</script>

 

2. 다운로드 받은 touchmovemenu.js 를 불러 옵니다.

 

 

 

 

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

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

 

<style>
ul,li{list-style:none;padding:0;margin:0;}
li{float:left;padding:0 10px;}
.container{width:100%; overflow:hidden;}
#slide_menu{width:2000px;}
</style>


<div class="container">
    <div id="slide_menu">
        <ul>
            <li><a href="#">다이얼미싱</a></li>
            <li><a href="#">전자미싱</a></li>
            <li><a href="#">이노비스</a></li>
            <li><a href="#">퀼트미싱</a></li>
            <li><a href="#">자수미싱</a></li>
            <li><a href="#">오버록미싱</a></li>
            <li><a href="#">컴퓨터자수기</a></li>
            <li><a href="#">스캔앤컷</a></li>
            <li><a href="#">기타</a></li>
        </ul>
    </div>
</div>


<script type="text/javascript">
$(function(){
    $('#slide_menu').touchMoveMenu();
});
</script>

 

3. 기본 스타일을 작성 합니다. 위 스타일은 예시로 운영중이신 홈페이지에 맞게 수정이 필요합니다.

 

 

 

 

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

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

 

<style>
ul,li{list-style:none;padding:0;margin:0;}
li{float:left;padding:0 10px;}
.container{width:100%; overflow:hidden;}
#slide_menu{width:2000px;}
</style>


<div class="container">
    <div id="slide_menu">
        <ul>
            <li><a href="#">다이얼미싱</a></li>
            <li><a href="#">전자미싱</a></li>
            <li><a href="#">이노비스</a></li>
            <li><a href="#">퀼트미싱</a></li>
            <li><a href="#">자수미싱</a></li>
            <li><a href="#">오버록미싱</a></li>
            <li><a href="#">컴퓨터자수기</a></li>
            <li><a href="#">스캔앤컷</a></li>
            <li><a href="#">기타</a></li>
        </ul>
    </div>
</div>


<script type="text/javascript">
$(function(){
    $('#slide_menu').touchMoveMenu();
});
</script>

 

4. 기본 html을 작성해 줍니다. ul 태그 및 li 태그는 필수입니다.

 

 

 

 

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

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

 

<style>
ul,li{list-style:none;padding:0;margin:0;}
li{float:left;padding:0 10px;}
.container{width:100%; overflow:hidden;}
#slide_menu{width:2000px;}
</style>


<div class="container">
    <div id="slide_menu">
        <ul>
            <li><a href="#">다이얼미싱</a></li>
            <li><a href="#">전자미싱</a></li>
            <li><a href="#">이노비스</a></li>
            <li><a href="#">퀼트미싱</a></li>
            <li><a href="#">자수미싱</a></li>
            <li><a href="#">오버록미싱</a></li>
            <li><a href="#">컴퓨터자수기</a></li>
            <li><a href="#">스캔앤컷</a></li>
            <li><a href="#">기타</a></li>
        </ul>
    </div>
</div>


<script type="text/javascript">
$(function(){
    $('#slide_menu').touchMoveMenu();
});
</script>

 

5. 플러그인이 실행될수 있도록 해줍니다.

※ 플러그인 설치 및 수정은 CONTAC US로 문의 해주세요.