[CSS/JQUERY] 풀스크린 메뉴( 화면 꽉찬 메뉴) 만들기

햄버거메뉴를 누르면 화면을 꽉채우는 메뉴가 나오고, Close버튼은 누르면 다시 없어지 메뉴를 만들어 보려고 합니다.

 

HTML

<div class="header">
        <div class="menu_btn"><a href="#">       
            <i class="im im-menu"></i>
        </a>
        </div>
</div>
<div class="fullscreen_menu">
     <div class="close_btn"><a href="#">       
        <i class="im im-x-mark"></i>
         </a>
     </div>
     <ul class="menu_wrap">
          <li><a href="#">메뉴01</a></li>
          <li><a href="#">메뉴02</a></li>
          <li><a href="#">메뉴03</a></li>
          <li><a href="#">메뉴04</a></li>
     </ul>
</div>

HTML는 크게 두개의 div로 나눠져 있습니다. div.header부분은 메뉴 햄버거버튼이 있는 부분이고, div.fullscreen_menu는 풀스크린 메뉴를 감싸는 div입니다. 

메뉴 아이콘은 무료 사이트에서 가져왔어욤.

 

 CSS

*{margin:0;padding:0}
body, html{width: 100%;height: 100%;}
.header{width: 100%;height: 80px;background: #ddd;}
.header .menu_btn{padding:10px;}
.fullscreen_menu{
    display: none;
}
.fullscreen_menu{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.7)}
.menu_wrap{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -82px 0 0 -35px;
}
.menu_wrap li{
    padding:10px;
    list-style: none;
}
.menu_wrap a{
    display: inline-block;
    color: #fff;
    text-decoration: none;
 
}
.close_btn{
    text-align: right;
}
.close_btn a{
    display: inline-block;
    color: #fff;
    margin: 10px;
}

특징 

01. 전체 div.fullscreen_menu는 width: 100%; height:100%로  화면을 꽉차도록 만들었어요. 부모인 body/html도  width: 100%; height:100%로 해줘야  div.fullscreen_menu가 전체화면을 만들어집니다. 

02. div.fullscreen_menu 의 position: absolute로 젤 위로 올라오도록 위치를 잡아줍니다.

03. div.menu_wrap로 position: absolute; 로 가운데 위치하도록 합니다. 요 부분에 가운데 정렬 글을 보면 좀 더 자세히 설명 해놓았습니다. 

2020/05/15 - [퍼블리싱/HTML&CSS] - [CSS] 콘텐츠 화면 정가운데 정렬하기

[CSS] 콘텐츠 화면 정가운데 정렬하기

JQUERY

$(document).ready(function(){
 
    $('.menu_btn>a').on('click', function(){
        $('.fullscreen_menu').fadeIn();
    });
    $('.close_btn>a').on('click', function(){
        $('.fullscreen_menu').hide(); 
    });
 
});
 

제이쿼리로 햄버거버튼을 누르면 풀스크린 메뉴가 나오도록, CLOSE버튼을 누르면 다시 풀스크린 메뉴를 없어지도록 제이쿼리로 만들어줍니다.