CSS
#move-list {
display: none;
position: fixed;
top:0;
left: 0;
width: 100%;
height: 100%;
background: rgba(2,16,62,0.9);
justify-content: center;
align-items: center;
z-index: 6;
}
#move-list.main-menu{
display: block;
}
#move-list .move-menu{
position: absolute;
border-radius: 10px;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
#move-list .move-menu a{
font-size: 60px;
letter-spacing: -2px;
line-height: 130px;
color: #ffffff;
font-weight: 800;
font-family: "Noto Sans CJ Kkr";
text-align: center;
padding-bottom:10px;
}
#move-list .move-menu a{
border-bottom:4px solid #ffffff;
}
#move-list .move-menu a:hover{
color:#1ec29a;
border-bottom:4px solid #1ec29a;
}
jQuery
var menu_controller = {
status_active: function ($drawer_menu){
$drawer_menu.removeClass('menu-active'); //언액티브
$('#move-list').removeClass('main-menu'); // 메인메뉴 오프
},
status_unactive: function ($drawer_menu) {
$drawer_menu.addClass('menu-active'); //액티브
$('#move-list').addClass('main-menu'); // 메인메뉴 온
}
}
$(document).ready(function(){
/*PC 메뉴 클릭하면 햄버거 버튼 체인지*/
$('#drawer-menu').on("click", function(){
var $drawer_menu = $('#drawer-menu');
if($drawer_menu.hasClass('menu-active')){ //만약 액티브 상태라면
menu_controller.status_active($drawer_menu); //언액티브로
} else { //액티브 상태가 아니라면
menu_controller.status_unactive($drawer_menu); //액티브로
}
})
$("html").on("click", function(clicked){
var $drawer_menu = $('#drawer-menu');
var $move_list = $('#move-list').css("display");
if($move_list === 'block'){ //메뉴가 떠 있는 상태라면
if(clicked.target.className === 'main-menu'){ //클릭한게 백그라운드라면
menu_controller.status_active($drawer_menu); //오프 메소드
}
}
})
})