- JAVASCRIPT
- 햄버거 메뉴
- 댓글 : 0건
- 글쓴이 : mrhmh
- 작성일 : 2025-09-30 12:59
- 조회수 : 881
<script>
$(document).ready(function() {
$('.hamburder-menu-button').click(function() {
$('.hamburger-menu').slideToggle('400');
$(this).toggleClass('active');
});
});
</script>
자바스크립트 햄버거 메뉴
햄버거 메뉴 스타일
<style>
.hamburger-menu { display:none; position: absolute; top:78px; left:0px; width:100%; z-index:10000; }
.hamburger-menu .menu-list { width:100%; min-height:325px; height:auto; background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #ddd; box-shadow:0 10px 20px rgba(0,0,0,.1); padding-bottom:0px; z-index:1000; padding-top:20px; }
.hamburger-menu .menu-list li { width:100%; line-height:40px; padding-left:30px; color:#eee; font-size:14px; }
.hamburger-menu .menu-list li i { margin-right:10px; }
.hamburger-menu .menu-list li a { color:#111; }
</style>
HTML 구조
<div class="hamburger-menu">
<div class="menu-list">
<ul class="site-menu">
<li><a href="<?php echo G5_URL ?>"><i class="fa-solid fa-house"></i> HOME</a></li>
</ul>
</div>
</div>
댓글목록
등록된 댓글이 없습니다.