반응형
제이쿼리로 만드는 모바일 햄버거 메뉴 당연한 얘기지만 제이쿼리를 기본적으로 불러와야한다. CDN방식으로 사용하면 펜하겠지만 로딩 이슈가 있어서 서버에 올린 상태를 기반으로 코드를 작성하였다.
햄버거 메뉴란?
햄버거 메뉴(drawer menu)란 주로 앱(app) 또는 모바일 웹 상단에 네비게이션으로 사용되는 메뉴로, 여러가지 다양한 기능들을 하나의 네비게이션 안에 담을 수 있기 때문에 흔하게 사용되어왔던 방식입니다.
HTML
<!doctype html>
<html lang="ko">
<head>
<script src="../../js/jquery-3.5.1.min.js"></script>
</head>
<!-- S gnb-->
<div class="menuBg"></div>
<div class="mMenuArea">
<div class="sidebarMenu">
<div class="closeArea">
<a class="closeBtn" href="javascript:;" title="모바일 메뉴 닫기"></a>
<div class="com">
<p class="mem"><img src="../../img/common/img_men.png" alt="프로필 이미지"></p>
<p class="memInfo">사원 홍길동 <span class="ml_10 btnS lGray"><a href="/mobile/login.html">로그아웃</a> </span> </p>
</div>
</div>
<ul class="menuWrap">
<li><a href="javascript:;" class="link01">메뉴01 <span class="icon-down-open-1"></span></a>
<div class="submenu">
<ul class="depth2">
<li><a href="/mobile/page/sub01/sub0102.html" class="link02">서브메뉴01</a></li>
<li><a href="/mobile/page/sub01/sub0103.html" class="link02">서브메뉴02</a></li>
<li><a href="/mobile/page/sub01/sub0104.html" class="link02">서브메뉴03</a></li>
<li><a href="/mobile/page/sub01/sub0105.html" class="link02">서브메뉴04</a></li>
<li><a href="/mobile/page/sub01/sub0106.html" class="link02">서브메뉴05</a></li>
<li><a href="/mobile/page/sub01/sub0107.html" class="link02">서브메뉴06</a></li>
<li><a href="/mobile/page/sub01/sub0108.html" class="link02">서브메뉴07</a></li>
<li><a href="#none" class="link02">서브메뉴08</a></li>
<li><a href="#none" class="link02">서브메뉴09</a></li>
</ul>
</div>
</li>
<li><a href="javascript:;">메뉴02 <span class="icon-down-open-1"></span></a>
<div class="submenu">
<ul class="depth2">
<li><a href="/mobile/page/sub02/sub0201.html" class="link02">휴게관리</a></li>
</ul>
</div>
</li>
<li><a href="javascript:;">메뉴03 <span class="icon-down-open-1"></span></a>
<div class="submenu">
<ul class="depth2">
<li><a href="/mobile/page/sub03/sub0301.html" class="link02">정규직전환평가</a></li>
</ul>
</div>
</li>
<li><a href="javascript:;">메뉴04 <span class="icon-down-open-1"></span></a>
<div class="submenu">
<ul class="depth2">
<li><a href="/mobile/page/sub04/sub0401.html" class="link02">교육정보</a></li>
</ul>
</div>
</li>
<li><a href="javascript:;">메뉴05 <span class="icon-down-open-1"></span></a>
<div class="submenu">
<ul class="depth2">
<li><a href="/mobile/page/sub05/sub0501.html" class="link02">의료비지원신청</a></li>
<li><a href="/mobile/page/sub05/sub0502.html" class="link02">경조금 신청</a></li>
<li><a href="/mobile/page/sub05/sub0503.html" class="link02">예상퇴직금계산</a></li>
<li><a href="/mobile/page/sub05/sub0504.html" class="link02">연차현황</a></li>
<li><a href="/mobile/page/sub05/sub0505.html" class="link02">재증명 신청</a></li>
<li><a href="/mobile/page/sub05/sub0506.html" class="link02">급여명세서</a></li>
</ul>
</div>
</li>
<li><a href="javascript:;">메뉴06 <span class="icon-down-open-1"></span></a>
<div class="submenu">
<ul class="depth2">
<li><a href="/mobile/page/sub06/sub0601.html" class="link02">휴먼메시지</a></li>
</ul>
</div>
</li>
<li><a href="javascript:;">메뉴07 <span class="icon-down-open-1"></span></a>
<div class="submenu">
<ul class="depth2">
<li><a href="/mobile/page/sub07/sub0701.html" class="link02">상담신청</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<!--// E gnb -->
CSS
/* tablet & mobile */
.menuBg{display:none;background:rgba(0,0,0,0.7); position:fixed;top:0;width:100%;height:100%; z-index:1001;}
/* mobile menu */
.header .mMenuArea{display:none;position:absolute;top:0;right:-80%; background:#fff;width:80%;min-height:100vh;height:100%;overflow:scroll;z-index:1002;}
.header .mMenuArea .closeArea{background:#0b253a; padding:20px; width:100%;min-height:50px;}
.header .mMenuArea .closeArea .btnS a{padding:0 15px;line-height:30px;}
.header .mMenuArea .closeArea .tit{position:absolute;top:10px; display:inline-block; font-size:20px;color:#fff; font-weight:700;}
.header .mMenuArea .closeBtn{position:absolute;top:20px;right:20px; display:block; background:url('../img/common/btn_menuClose.png') no-repeat top left;background-size:100%; width:23px;height:23px;}
.header .mMenuArea .com{float:left; color:#fff;}
.header .mMenuArea .com .mem img{width:50%;}
.header .mMenuArea .com .mem{margin-bottom:20px;}
.header .mMenuArea .com .mem{margin-bottom:20px;}
.header .mMenuArea .btnLogin{font-size:20px; color:#fff; font-weight:500;}
.header .mMenuArea .btnSign{margin-left:10px;font-size:20px; color:#fff; font-weight:500;}
.header .mMenuArea .menuWrap li{display:block;border-bottom:1px solid #ddd;width:100%;line-height:50px; text-indent:10%;}
.header .mMenuArea .menuWrap li span{display:inline; margin-right:10%; float:right;}
.header .mMenuArea .menuWrap li a{display:block; font-weight:700;}
.header .mMenuArea .menuWrap .submenu{display:none;display:block;background:#e6eaed;height:auto;}
.header .mMenuArea .menuWrap .depth2{width:100%;height:100%;}
.header .mMenuArea .menuWrap .depth2 li:first-child{border-top:1px solid #ddd;margin-left:0;}
.header .mMenuArea .menuWrap .depth2 li{display:block;text-indent:15%;}
.header .mMenuArea .menuWrap .depth2 li:last-child{border-bottom:0;}
.header .mMenuArea .menuWrap .submenu2{display:none;height:auto;overflow:auto;}
.header .mMenuArea .menuWrap .depth3{width:100%;height:100%;}
.header .mMenuArea .menuWrap .depth3 li{display:block;width:100%; text-indent:0;}
.header .mMenuArea .menuWrap .depth3 li:first-child{border-top:1px solid #ddd;margin-left:0;}
.header .mMenuArea .menuWrap .depth3 li:last-child{border-bottom:0;}
.header .mMenuArea .menuWrap .depth3 li i{margin-left:15%;margin-right:0; float:left;}
jQuery
// mobile menu
$("#mMenu").ready(function () {
$('.openBtn').on('click', function(){
$('body').css('overflow','hidden');
$('body').css('height','100%');
$('.menuBg, .mMenuArea').show();
$('.mMenuArea').animate({
right:0
});
});
$('.closeBtn, .menuBg').on('click', function(){
$('body').css('overflow','scroll');
$('body').css('height','auto');
$('.menuBg, .mMenuArea').hide();
$('.mMenuArea').animate({
right: '-' + 80 + '%'
});
});
});
$(".mMenuArea").ready(function () {
$('.submenu, .submenu2').hide();
$('.menuWrap a').click(function () {
// $(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('.submenu, .submenu2').slideUp();
}
else {
element.addClass('open');
element.children('.submenu, .submenu2').slideDown();
element.siblings('li').children('.submenu, .submenu2').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('.submenu, .submenu2').slideUp();
}
});
});
반응형
'FE 개발 > JavaScript' 카테고리의 다른 글
| [반응형 UI] PC Mobile 한번에 사용가능 한 제이쿼리(jQuery) 햄버거 GNB 메뉴 (1) | 2024.01.04 |
|---|---|
| 제이쿼리 모바일 햄버거 메뉴 jQeury mobile burger menu (0) | 2023.06.24 |
