[자바스크립트] Full Screen 햄버거 메뉴 만드는 방법

 

 

 

색깔별로 한눈에 보기 쉽고 이해하기 쉽게 설명한

자바스크립트 Full Screen 풀 스크린 햄버거 메뉴 만드는 방법 알아보기와 예제

 

 

 

 

햄버거 메뉴란?

웹이나 앱을 사용하면서 자주 보는 막대기처럼 생긴 메뉴 아이콘으로 흔히 화면이 작은 모바일 앱에서 많이 사용된다.

갈수록 UI(User Interface)와 Design은 심플하고 간결한 것을 선호하기 때문에 작은 화면일수록 더욱 심플한 디자인을 채택하게 된다.

 

 

 

 

 

 

 

웹 개발자나 프론트엔드,퍼블리셔는 햄버거 메뉴라고 하는데 모든 웹 개발 언어는 영어가 기반인만큼 개발의 시초인 서구에서 실제 햄버거 모양과 비슷했기에 붙여진 이름이라 추측된다.

 

 

 

간단 설명 첨삭하겠습니다.

 

 

보기 편하게 색깔별로 표시해두었습니다.

노란색 - 글자가 노란색인 설명을 본다. 

 

HTML

<div class="btn_container" id="toggle">   <!-- 버튼 만들기 위한 큰 틀  버튼 활성화를 위한 토글 -->   <span class="top"></span>         <!-- 햄버거의 맨 위 막대기 -->   <span class="middle"></span>    <!-- 햄버거의 가운데 막대기 -->   <span class="bottom"></span>    <!-- 햄버거의 맨 아래 막대기 --> </div> <div class="fullscreen" id="fullscreen">    <!-- 풀스크린 메뉴 만들기 위한 큰 틀 토글 활성화시 풀스크린 메뉴 열기 -->   <nav class="fullscreen-menu">          <!-- 풀스크린 메뉴 만들기 -->     <ul>       <li><a href="#">menu1</a></li>  <!-- 각 목차 이름 지정 -->       <li><a href="#">menu2</a></li>       <li><a href="#">menu3</a></li>       <li><a href="#">menu4</a></li>     </ul>   </nav> </div>

 

 

 

 

 

 

 

CSS

.btn_container {   position: fixed;   top: 5%;   right: 2%;   height: $button-height;   width: $button-width;   cursor: pointer;   z-index: 100;   transition: opacity .25s ease;      &:hover {     opacity: .7;   }      &.active {     .top {       transform: translateY(11px) translateX(0) rotate(45deg);       background: $color-active;     }     .middle {       opacity: 0;       background: $color-active;     }          .bottom {       transform: translateY(-11px) translateX(0) rotate(-45deg);       background: $color-active;     }   }      /* 햄버거메뉴(버튼) 막대기 만들기, span이라 class를 하나 더 만들어 주는 것이 좋다. */   span {   background: $color-main;   border: none;   height: 5px;   width: 100%;   position: absolute;   top: 0;   left: 0;   transition:  all .35s ease;   cursor: pointer;          &:nth-of-type(2) {       top: 11px;     }          &:nth-of-type(3) {       top: 22px;     }   } } /* 메뉴버튼 활성화시 보여질 풀스크린(빨간 배경) 메뉴 만들기 */ .fullscreen {   position: fixed;   background: $color-main;   top: 0;   left: 0;   width: 100%;   height: 0%;   opacity: 0;   visibility: hidden;   transition: opacity .35s, visibility .35s, height .35s;   overflow: hidden;      &.open {     opacity: .9;     visibility: visible;     height: 100%;          li {       animation: fadeInRight .5s ease forwards;       animation-delay: .35s;              &:nth-of-type(2) {         animation-delay: .4s;       }       &:nth-of-type(3) {         animation-delay: .45s;       }       &:nth-of-type(4) {         animation-delay: .50s;       }     }   } /* 풀스크린 메뉴 - 메뉴 */   nav {     position: relative;     height: 70%;     top: 50%;     transform: translateY(-50%);     font-size: 50px;     font-family: 'Vollkorn', serif;     font-weight: 400;     text-align: center;   }   ul {     list-style: none;     padding: 0;     margin: 0 auto;     display: inline-block;     position: relative;     height: 100%;           li {       display: block;       height: 25%;       height: calc(100% / 4);       min-height: 50px;       position: relative;       opacity: 0;              a {         display: block;         position: relative;         color: $color-link;         text-decoration: none;         overflow: hidden;                  &:hover:after,          &:focus:after,          &:active:after {            width: 100%;          }                  &:after {           content: '';           position: absolute;           bottom: 0;           left: 50%;           width: 0%;           transform: translateX(-50%);           height: 3px;           background: $color-link;           transition: .35s;         }       }     }   } } /* 키프레임으로 메뉴들이 나타날때 효과를 줌 */ @keyframes fadeInRight {   0% {     opacity: 0;     left: 20%;   }   100% {     opacity: 1;     left: 0;   } }

 

 

JS

$('#toggle').click(function() {    $(this).toggleClass('active');    $('#fullscreen').toggleClass('open');   });

 

 

 

 

 

문의는 댓글 남겨주세요.