topmenu.js

모바일웹 환경에서 부족한 화면 사이즈에 더 많은 정보를 노출시키기 위해서 사용되는 플러그인

샘플영상

다운로드

topmenu.js 다운로드

설치/사용법

<style>
    .button{text-align:center; background:#eee; height:20px; line-height:20px;}
</style>

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

<script>
    $(function(){
        $('#topmenu').topmenu({
            button:'.button',
            dropspeed:800,
            returnspeed:500
        });
    });
</script>

<body>
    <div id="topmenu">
        <div><!-- 메뉴 또는 배너 --></div>
        <div class="button"><!-- 버튼명 --></div>
    </div>
    <div>
        <!-- 본문 -->
    </div>
</body> 

 

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

 

 

 

 

<style>
    .button{text-align:center; background:#eee; height:20px; line-height:20px;}
</style>

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

<script>
    $(function(){
        $('#topmenu').topmenu({
            button:'.button',
            dropspeed:800,
            returnspeed:500
        });
    });
</script>

<body>
    <div id="topmenu">
        <div><!-- 메뉴 또는 배너 --></div>
        <div class="button"><!-- 버튼명 --></div>
    </div>
    <div>
        <!-- 본문 -->
    </div>
</body> 

 

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

 

 

 

 

<style>
    .button{text-align:center; background:#eee; height:20px; line-height:20px;}
</style>

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

<script>
    $(function(){
        $('#topmenu').topmenu({
            button:'.button',
            dropspeed:800,
            returnspeed:500
        });
    });
</script>

<body>
    <div id="topmenu">
        <div><!-- 메뉴 또는 배너 --></div>
        <div class="button"><!-- 버튼명 --></div>
    </div>
    <div>
        <!-- 본문 -->
    </div>

</body> 

 

3. 기본 레이아웃을 작성 합니다.

 

 

 

 

<style>
    .button{text-align:center; background:#eee; height:20px; line-height:20px;}
</style>

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

<script>
    $(function(){
        $('#topmenu').topmenu({
            button:'.button',
            dropspeed:800,
            returnspeed:500
        });

    });
</script>

<body>
    <div id="topmenu">
        <div><!-- 메뉴 또는 배너 --></div>
        <div class="button"><!-- 버튼명 --></div>
    </div>
    <div>
        <!-- 본문 -->
    </div>
</body> 

 

5. 자동으로 실행 될수 있도록 함수를 작성해 줍니다.

 

 

 

 

$('#topmenu').topmenu({
            button:'.button', // 열고 닫을 버튼의 아이디 또는 클래스
            dropspeed:800, // 펼쳐질때 속도. 해당 옵션을 지우면 기본으로 0.8초의 속도 적용. 1000 = 1초 
            returnspeed:500 //접힐때 속도. 해당 옵션을 지우면 기본으로 0.5초의 속도 적용. 1000 = 1초 
});

 

6. 적절히 옵션을 적용 합니다.

 

 

 

 





! 플러그인 설치 및 수정은 견적문의 해주세요.