touchmovemenu.js 모바일웹 메뉴에 슬라이드 기능 추가 해주는 플러그인

모바일웹에서 가로사이즈를 초과하는 메뉴가 있을 경우 메뉴에 슬라이드 기능을 추가하면 유용 합니다.

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. 다운로드 받은 플러그인을 연결합니다.( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. )

<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. 플러그인이 실행될 수 있도록 해줍니다.

2017/12/21 - [jQuery] - [워크식스] select 에 css 적용하기 - designSelect_1.3.js

2018/01/03 - [jQuery] - [워크식스] 라디오버튼에 스타일 적용하기 - designRadio_1.0.js

2019/01/15 - [jQuery] - input file 에 스타일 적용 시켜주는 플러그인 designFile.js - 워크식스

[문의하기]

copyright ⓒ 2017. 워크식스