Header Navigation

Header Navigation

Header Navigation

index.html

<div class="menu">
  <div class="container">
    <div class="toggle"></div>
  </div>
  <ul class="nav">
    <li><a href="#">Home </a></li>
    <li><a href="#">About </a></li>
    <li><a href="#">Info</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

script.js

$('.toggle').on('click', function() {
  $('.menu').toggleClass('open');  
  $('.nav').toggleClass('show-nav');  
  $('.nav a').toggleClass('show-nav-link');  
  $('.container , .toggle').toggleClass('close');  
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.scss

$size: 36px; // Change Me
$height: $size / 8;
$margin: $size / 3.2;
$toggle: ($size + $margin*2) * 1.5; 

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #B8BEDD; 
  min-height: 100vh;
  margin: 0;
  font-family: roboto;
  &:before {
    content: '';
    background:#EFC3E6;
    height: 50%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.menu {
  display: block;
  box-sizing: border-box;
  background:#F0E6EF;
  height: $toggle;
  width: $toggle;
  padding: $size;
  border-radius: $size/6;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
  transition: 1.3s cubic-bezier(.15,0,0,.97);
  &.open {
    width: $toggle*4;
  }
}
.nav{
 opacity:0;
  transition: opacity .3s;
  
  &.show-nav{
     position: absolute;
    top: -6px;
    left: -280px;
    opacity:1;
    li{
      a{
        &.show-nav-link{
          opacity:1;
           transform: rotateY(90deg);
          
          &:nth-of-type(1) {
    transition-delay: .4s;
  }
  &:nth-of-type(2) {
    transition-delay: .5s;
  }
  &:nth-of-type(3) {
    transition-delay: .6s;
  }
  &:nth-of-type(4) {
    transition-delay: .7s;
  }
      
        }
      }
    }
   
     }
  li{
    display:inline;
   
    
    a{
      opacity:0;
        transform: rotateY(0deg);
          transition: .3s;
     
&:nth-of-type(1) {
    transition-delay: .4s;
  }
  &:nth-of-type(2) {
    transition-delay: .5s;
  }
  &:nth-of-type(3) {
    transition-delay: .6s;
  }
  &:nth-of-type(4) {
    transition-delay: .7s;
  }
      
  }
    
}
  
  a {
    color: #4A4651;
    text-decoration: none;
    font-size: $size/1.8;
    transition: .3s;
    &:hover {
      color:#F0A6CA; 
    }
  }
 
}
.container {
  position: absolute;
  top: #{($toggle - ($margin*3 + $height*2)) / 2};
  right: calc(100% - #{($toggle - ($size + $margin*2)) / 2 + ($size + $margin*2)});
  height: $height*2 + $margin*3;
  width: $size + $margin*2;
  transition: 1s;
  &.close {
    right: 0;
  }
}
.toggle {
  position: relative;
  height: $margin*3 + $height*2;
  width: $margin*2 + $size;
  cursor: pointer;
  &:after,
  &:before {
    content: '';
    background: #9C89B8;
    width: $size;
    height: $height;
    margin: auto;
    position: absolute;
    top: 0; bottom: 0;
    right: 0; left: 0;
    transition: 1.3s 
    cubic-bezier(.53,0,.15,1.3);
    //cubic-bezier(.52,-0.39,.55,1.41); 
  }
  &:before { top: -30%; }
  &:after { top: 30%; }
  &.close:before {
    transform: rotate(-225deg);
    top: 0;
  }
  &.close:after {
    transform: rotate(225deg);
    top: 0;
  }
}