ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • touchmovemenu.js 모바일웹 메뉴에 슬라이드 기능 추가 해주는 플러그인
    워크식스소식/플러그인소식 2017. 3. 28. 08:30




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


    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. 워크식스








    댓글 0

work6.kr