<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. 적절히 옵션을 적용 합니다.