[해피CGI][cgimall] Fullscreen Menu Flexbox Method(풀메뉴)

사이트 제작시 많이 사용되는 풀메뉴 소스를 공유합니다.

HTML 소스

.plus-btn-pos 
  .plus-btn
    .r1
    .r2
.content
  div
    h1 Fullscreen Menu
    h2 Flexbox Style
.menu-container  
  - for i in (1..3)
      .menu-sliders
  .menu
    ul
      li
        a Home
      li
        a About      
      li
        a Work
      li
        a Contact

CSS 소스

@import url(https://fonts.googleapis.com/css?family=Roboto:300,100);

.content {
  display:flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100vh;
  width: 100vw;  
  z-index: 1;
  text-align:center;
  font-family: 'Roboto', sans-serif;
  color: black;
  h1 {
    font-size: 60px;  
    margin-bottom: 15px;
    font-weight: 300;
  }
  h2 {
    font-size: 42px;
    font-weight: 100;
  }
}

.menu-container {
  z-index: 2;
  position: relative;
  display:flex;
  align-items: stretch;
  overflow: hidden;
  height: 100vh;
  width: 100vw;  
  pointer-events:none;
}

.menu {
  display:flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100vh;
  width: 100vw;  
  z-index: 3; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(-100%);
  transition: transform 0.5s;
  transition-delay:0.5s;
  visibility: hidden;
  ul {
    li {
      font-family: 'Roboto', sans-serif;
      font-weight: 100;
      font-size: 45px;
      color: white;
      min-height: 45px;
      padding: 15px;
      text-align: center;
      a{
        cursor:pointer;
      }
    }
  }
}

.menu-sliders {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: flex 0.45s;
  &:nth-child(2) {
    flex:1 0 100%;
    background: transparent;
  }  
    &:nth-child(odd){
      background: darken(dodgerblue,20%);
  }
}

.plus-btn-pos {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
}

.plus-btn {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: white;
  position: relative;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  cursor:pointer;
  div{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 3px;
    background: rgba(2, 89, 165, 1);
    transition: transform 0.3s;
    transition-delay: 0.5s;
  }
  .r1{
    transform: translateX(-50%)translateY(-50%)rotate(-90deg);   
  }
  .r2{
    transform: translateX(-50%)translateY(-50%)rotate(-180deg);
  }
  
  &:hover{
      background: rgba(2, 89, 165, 1);
    div{
      background: white;
    }
  }
  &:active{
      box-shadow: none;
  }
}  

body.menu-open {  
  .menu-sliders:nth-child(2) {
     flex:0 0 0%;
  } 
  .menu {
    transform: translateY(0%);
    visibility: visible;
    pointer-events:all;
  }
 .plus-btn {
    .r1{
      transform: translateX(-50%)translateY(-50%)rotate(-45deg);   
    }
    .r2{
      transform: translateX(-50%)translateY(-50%)rotate(-135deg);
    }  
  }
}
  

JS 소스

$('.plus-btn').click(function(){
  $('body').toggleClass('menu-open');
})