<input type="checkbox" role="button" title="menu" id="humberger_check" />
<label for="humberger_check" class="humberger" aria-hidden="true" title="menu">
  <span></span>
</label>
<header class="header_bar">
  <h1>SITE TITLE</h1>
</header>
<main class="container">
  <section class="content">
    <h2>3D Rotating Hidden Menu</h2>
  </section>
</main>
<nav class="hidden_menu">
  <ul>
    <li data-bar-color="#FA3687">
      <a href="#"><i class="icon-picture"></i>IMAGE</a>
    </li>
    <li data-bar-color="#21D7A8">
      <a href="#"><i class="icon-film"></i>VIDEO</a>
    </li>
    <li data-bar-color="#1E9ED4">
      <a href="#"><i class="icon-music"></i>MUSIC</a>
    </li>
    <li data-bar-color="#B0D44A">
      <a href="#"><i class="icon-headphones"></i>PERSONAL</a>
    </li>
    <li data-bar-color="#A865D5">
      <a href="#"><i class="icon-cogs"></i>SETTINGS</a>
    </li>
  </ul>
  <span class="menu_underline"></span>
</nav>

$fonts:Lato,Arial,"Hiragino Kaku Gothic Pro W3",Meiryo,sans-serif;
$bg_color:#333;
$font_color:#efefef;
$link_color:#efefef;
$link_hover_color:#ccc;
* {
  box-sizing:border-box;
  &:before,
  &:after{
    padding:0;
    margin:0;
  }
}
body{
  font-family:$fonts;
  background-color:$bg_color;
  color: $font_color;
  text-align: center;
  margin:0;
  padding:0;
  a, a:visited{
    color: $link_color;
    text-decoration:none;
  }
  a:hover{
    color: $link_hover_color;
  }
}
.container {
  position:relative;
}
.content {
  margin: 0 auto;
  padding:5% 40px;
}

// Extend
%backface_visibility_hidden{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
%hover_easing_0_2s {
  transition:all 0.2s ease;
}
%hover_easing_0_3s {
  transition:all 0.3s ease;
}
%hover_easing_0_4s {
  transition:all 0.4s ease;
}
%hover_easing_0_5s {
  transition:all 0.5s ease;
}
%filled_obj{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

#humberger_check{
  width:0;
  height:0;
  opacity:0;
  visibility:hidden;
  &:checked{
    +.humberger{
      transform:translateY(160px);
      span{
        background-color:transparent;
        &::before{
          top:2px;
          transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;
          -webkit-transform:translate3d(0,10px,0) rotate(45deg);
          transform:translate3d(0,10px,0) rotate(45deg);
        }
        &::after{
          top:6px;
          transition:top .2s cubic-bezier(.33333,0,.66667,.33333),transform .13s cubic-bezier(.215,.61,.355,1) .22s;
          -webkit-transform:translate3d(0,6px,0) rotate(-45deg);
          transform:translate3d(0,6px,0) rotate(-45deg);
        }
      }
    }
    
    ~.header_bar,
    ~.container{
      transform:translateY(160px);
    }
    ~.hidden_menu{
      transform:translateY(0);
      ul{
        opacity:1;
        transform:rotateX(0);
      }
    }
  }
}
.humberger{
  position:fixed;
  top:20px;
  right:5vw;
  width:40px;
  height:40px;
  cursor:pointer;
  z-index:3;
  @extend %hover_easing_0_5s;
  span{
    position:absolute;
    top:6px;
    left:50%;
    width:30px;
    height:4px;
    margin:0 auto auto -15px;
    background-color:#fff;
    transition:background-color .1s linear .13s;
    &::before,
    &::after{
      content:'';
      position:absolute;
      left:0;
      width:100%;
      height:4px;
      background-color:#fff;
    }
    &::before{
      top:12px;
      transition:top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19);
    }
    &::after{
      top:24px;
      transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19);
    }
  }
}
.hidden_menu{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:160px;
  -webkit-perspective:1600px;
  perspective:1600px;
  background-color:#222;
  z-index:3;
  transform:translateY(-100%);
  @extend %hover_easing_0_5s;
  @extend %backface_visibility_hidden;
  ul{
    list-style: none;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    opacity:0;
    background-color:rgba(#fff,.08);
    -webkit-transform-origin:center bottom;
    transform-origin:center bottom;
    transform:rotateX(90deg);
    @extend %hover_easing_0_5s;
    @extend %backface_visibility_hidden;
    li{
      position:relative;
      display:table;
      width:20%;
      height:100%;
      float:left;
      font-size:13px;
      @extend %hover_easing_0_3s;
      &::before{
        opacity:0;
        // border-radius:50%;
        @extend %filled_obj;
        transform:scale(0);
      }
      &:nth-child(1){
        &::before{
          background-color:#FA3687;
        }
      }
      &:nth-child(2){
        &::before{
          background-color:#21D7A8;
        }
      }
      &:nth-child(3){
        &::before{
          background-color:#1E9ED4;
        }
      }
      &:nth-child(4){
        &::before{
          background-color:#B0D44A;
        }
      }
      &:nth-child(5){
        &::before{
          background-color:#A865D5;
        }
      }
      &.selected{
        &::before{
          animation:scaling .4s linear;
        }
      }
      &:hover{
        background-color:rgba(#000,.14);
      }
      a{
        position:relative;
        display:table-cell;
        vertical-align:middle;
      }
      i{
        display:block;
        margin-bottom:15px;
        font-size:25px;
      }
    }
  }
}
.menu_underline{
  position:absolute;
  bottom:0;
  height:0;
  width:20%;
  background-color:#fff;
  @extend %hover_easing_0_3s;
  &.visible{
    height:3px;
  }
}
.header_bar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:80px;
  padding:0 5vw;
  text-align:left;
  border-bottom:1px solid rgba(#fff,.2);
  z-index:2;
  @extend %hover_easing_0_5s;
  &::before{
    @extend %filled_obj;
    background-color:rgba(#000,.84);
    box-shadow:0 2px 8px rgba(#000,.26);
    opacity:0;
    @extend %hover_easing_0_3s;
  }
  &.show-bg{
    &::before{
      opacity:1;
    }
  }
  h1{
    position:relative;
    margin:26px 0 0;
    font-size:20px;
    display:inline-block;
    
  }
}
.container{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:1;
  background-size:cover;
  background-attachment:fixed;
  background-position:center;
  background-image:url(https://images.unsplash.com/photo-1517231925375-bf2cb42917a5?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MzA4Mjg3MA&ixlib=rb-1.2.1&q=85);
  @extend %hover_easing_0_5s;
  &::before{
    @extend %filled_obj;
    position:fixed;
    background-color:rgba(#000,.6);
  }
}
.content{
  position:relative;
  margin:100px auto 4vw;
  padding:0 5vw;
  height:100vh;
  h2{
    position:relative;
    top:30vh;
    font-size:38px;
  }
}

@keyframes scaling{
  50%{
    opacity:.28;
    transform:scale(.5);
  }
  100%{
    opacity:0;
    transform:scale(1.05);
  }
}
@media ( max-width : 680px ){
  #humberger_check{
    &:checked{
      +.humberger,
      ~.header_bar,
      ~.container{
        transform:translateY(300px);
      }
    }
  }
  .hidden_menu{
    height:300px;
    ul{
      li{
        float:none;
        width:100%;
        height:60px;
        font-size:12px;
        i{
          display:inline;
          font-size:18px;
          margin-right:15px;
        }
      }
    }
  }
  .menu_underline{
    width:100%;
    left:0;
    bottom:auto;
  }
}

var mqWidth = 680,
    scrollTrigger = 40,
    isMobile = null,
    burgerCheckbox = $('#humberger_check'), 
    hiddenMenu = $('.hidden_menu li'),
    slideBar = $('.menu_underline'),
    headerBar = $('.header_bar');

function sliderBarAnimation(){
  if ( $(window).width() > mqWidth ){
    if (isMobile === false) return;
    isMobile = false;
    hiddenMenu.off('mouseenter mouseleave').hover(
      // nmouseenter
      function(){
        var current = $(this),
            barColor = current.data('bar-color');
        slideBar.addClass('visible').css({
          'top':'auto',
          'left' : current.position().left,
          'background-color':barColor
        })
      },
      //mouseleave
      function(){
        slideBar.removeClass('visible');
      }
    );
  } else {
    if (isMobile === true) return;
    isMobile = true;
    hiddenMenu.off('mouseenter mouseleave').hover(
      // nmouseenter
      function(){
        var current = $(this),
            barColor = current.data('bar-color');
        slideBar.addClass('visible').css({
          'left':0,
          'top':current.offset().top + 60,
          'background-color':barColor
        });
      },
      //mouseleave
      function(){
        slideBar.css({'top':0}).removeClass('visible');
      }
    );
  }
}
$(window).on({
  'resize' : function(){
      sliderBarAnimation();
    },
  'scroll' : function(){
    if ($(window).scrollTop() > scrollTrigger){
      headerBar.addClass('show-bg');
    } else {
      headerBar.removeClass('show-bg');
    }
  }
});
(function(){
  sliderBarAnimation();
  
  hiddenMenu.on('click', function(){
    var current = $(this);
    current.addClass('selected');
    setTimeout(function(){
      current.removeClass('selected');
      burgerCheckbox.prop('checked',false);
    }, 400);
  });
  hiddenMenu.children('a:not([target]):not([href^="tel:"])').on('click', function(e){
    var url = $(this).attr("href");
    if (!url) return;
    e.preventDefault();
    setTimeout(function(){
      window.location = url;
    },400);
  });
})(jQuery);