728x90
반응형
버튼을 클릭하면 우측에서 메뉴가 슬라이딩 되는 동시에, 메뉴 밖의 영역은 검정색 반투명 마스크로 덮습니다.
1. <head> </head> 태그 안에 제이쿼리를 불러옵니다.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
2. CSS
#header { width: 100%; height: 52px; background: #447e65; position: relative; overflow: hidden; }
#mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); zoom: 1; opacity: 0.5; z-index: 9998; display: none; }
.logo { font-size: 25px; color: #fff; position: absolute; top: 5px; left: 15px; }
.btn_menu_open { background: none; border: 0; font-size: 15px; color: #fff; position: absolute; top: 15px; right: 15px; cursor: pointer; }
.slide_menu { width: 80%; height: 100%; max-width: 360px; background: #fff; position: fixed; top: 0; right: 0; overflow-y: scroll; z-index: 9999; display: none; }
.slide_menu .menu_close { width: 100%; height: 52px; background: #447e65; position: relative; }
.slide_menu .btn_menu_close { background: none; border: 0; font-size: 15px; color: #fff; position: absolute; top: 15px; right: 15px; cursor: pointer; }
.slide_menu .menu_list li { padding: 15px; border-bottom:1px solid #ccc; list-style: none; }
.slide_menu .menu_list li a { font-size: 15px; color: #333; }
3. HTML
<div id="header">
<div id="mask"></div>
<h1><a href="#" class="logo">logo</a></h1>
<button type="button" class="btn_menu_open">메뉴 열기</button>
<div class="slide_menu">
<div class="menu_close"><button type="button" class="btn_menu_close">메뉴 닫기</button></div>
<ul class="menu_list">
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
<li><a href="#">메뉴 4</a></li>
<li><a href="#">메뉴 5</a></li>
</ul>
</div>
</div>
4. Script
<script type="text/javascript">
$(document).ready(function(){
$(".btn_menu_open").click(function(){
$("#mask").fadeIn(100);
$(".slide_menu").show().animate({right: "0"});
});
$("#mask, .btn_menu_close").click(function(){
$("#mask").fadeOut(100);
$(".slide_menu").hide().animate({right: "0"});
});
});
</script>
728x90
