Header Navigation Menu

header-navigation-menu.markdown

Header Navigation Menu

Based on this Dribbble shot.

https://dribbble.com/shots/2427219-Header-Navigation-Day-053-dailyui

A Pen by ssbalakumar on CodePen.

License.

index.pug

.menu
  .container
    .toggle
  span.hidden
    a(href='#') Home 
  span.hidden
    a(href='#') About 
  span.hidden
    a(href='#') Info
  span.hidden
    a(href='#') Contact

script.js

$('.toggle').on('click', function() {
  $('.menu').toggleClass('expanded');  
  $('span').toggleClass('hidden');  
  $('.container , .toggle').toggleClass('close');  
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.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: #1D90F5; 
  min-height: 100vh;
  margin: 0;
  font-family: roboto;
  &:before {
    content: '';
    background: #E8FAFF;
    height: 50%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.menu {
  display: block;
  box-sizing: border-box;
  background: white;
  height: $toggle;
  width: $toggle;
  padding: $size;
  border-radius: $size/6;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
  transition: 1.3s cubic-bezier(.53,0,.15,1.3);
  &.expanded {
    width: $toggle*4;
  }
}
span {
  padding: $size/4;
  white-space: nowrap;
  visibility: visible;
  opacity: 1;
  transition: .3s;
  transform: rotateY(0deg);
  &: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;
  }
  &.hidden {
    width: 0;
    visibility: hidden;
    opacity: 0;
    transform: rotateY(90deg);
    &:nth-of-type(1) {
    transition-delay: .3s;
  }
  &:nth-of-type(2) {
    transition-delay: .2s;
  }
  &:nth-of-type(3) {
    transition-delay: .1s;
  }
  &:nth-of-type(4) {
    transition-delay: 0s;
  }

  }
  a {
    color: black;
    text-decoration: none;
    font-size: $size/2.2;
    transition: .3s;
    &:hover {
      color: #1D90F5; 
    }
  }
}
.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: #1D90F5;
    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;
  }
}