Material design navigation menu

index.html

<div class="fixed-container">
  <a class="btn-floating btn-large waves-effect waves-light circle btn-nav"><i id="icon" class="fa fa-plus"></i></a>
  <div class="circle-container">
    <div class="round-circle nav-circle waves-effect waves-teal first-circle">
      <a href="#home"><i class="fa fa-nav fa-home"></i></a>
    </div>
    <div class="round-circle nav-circle waves-effect waves-teal second-circle">
      <a href="#skills"><i class="fa fa-nav fa-rocket"></i></a>
    </div>
    <div class="round-circle nav-circle waves-effect waves-teal third-circle">
      <a href="#portfolio"><i class="fa fa-nav fa-trophy"></i></a>
    </div>
    <div class="round-circle nav-circle waves-effect waves-teal forth-circle">
      <a href="#contact"><i class="fa fa-nav fa-beer"></i></a>
    </div>
  </div>
</div>

Material design navigation menu.markdown

Material design navigation menu

Material design menu

A Pen by Antonija Šimić on CodePen.

License.

script.js

$(window).load(function() {
  var buttonCircles = $(".nav-circle");

  $(".btn-nav").on("tap click", function() {
    $(this).toggleClass("closed-nav")
    if ($(this).hasClass("closed-nav")) {
      slideDown();
    } else {
      slideUp()
    }
  });

  $(".round-circle").click(function() {
    $(".btn-nav").toggleClass("closed-nav");
    slideUp();
  })

  function slideDown() {

    var topMargin = 20
    for (i = 0; i < buttonCircles.length; i++) {
      topMargin += 85
      $(buttonCircles[i]).animate({
        top: topMargin
      }, function() {
        $(".circle-container, .round-circle").css("visibility", "visible");
        if ($(".fa-plus").hasClass("unRotateIcon")) {
          $(".fa-plus").removeClass("unRotateIcon").addClass("rotateIcon");
        } else {
          $(".fa-plus").addClass("rotateIcon");
        }

      })
    }
  }

  function slideUp() {

    var resetTop = 20
    for (i = 0; i < buttonCircles.length; i++) {
      $(buttonCircles[i]).animate({
        top: resetTop
      }, 400, function() {
        $(".circle-container, .round-circle").css("visibility", "hidden");
        if ($(".fa-plus").hasClass("rotateIcon")) {
          $(".fa-plus").removeClass("rotateIcon").addClass("unRotateIcon");
        } else {
          $(".fa-plus").addClass("unRotateIcon");
        }
      })
    }
  }

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>

style.css

/* custom css */

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: #4DAF7C;
}

.btn-nav {
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: #67809F !important;
  z-index: 9999;
  height: 80px !important;
  width: 80px !important;
  line-height: 80px !important;
}

.fa-plus {
  color: #fff !important;
  font-size: 2em !important;
  margin-top: 11px;
  font-weight: 300;
}

.plus-container {
  border: 1px solid #fff;
  margin-top: 100px;
  text-align: center;
}

.fa-exp {
  font-size: 6em;
  margin: 0 auto;
  display: block;
}

.round-circle {
  border-radius: 50%;
  border: 1px solid #67809F;
  background-color: #FFF;
  width: 80px;
  height: 80px;
  position: absolute;
  top: 20px;
  text-align: center;
  line-height: 80px;
  visibility: hidden;
}

.round-circle > a {
  height: 80px;
  width: 80px;
}

.circle-container {
  visibility: visible;
  position: absolute;
  height: 400px;
  left: 20px;
  width: 100px;
}

.first-circle {
  z-index: 4;
}

.second-circle {
  z-index: 3;
}

.third-circle {
  z-index: 2;
}

.forth-circle {
  z-index: 1;
}

.fixed-container {
  position: fixed;
  z-index: 99999;
  display: block;
}

.fa-nav {
  color: #2C3E50;
  font-size: 2.3em;
  margin-top: 20px;
}

@-webkit-keyframes rotateIcon {
  from {
    -webkit-transform: rotateZ(0);
       -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
         -o-transform: rotateZ(0);
            transform: rotateZ(0);
  }

  to {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@-moz-keyframes rotateIcon {
  from {
    -webkit-transform: rotateZ(0);
       -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
         -o-transform: rotateZ(0);
            transform: rotateZ(0);
  }

  to {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@-o-keyframes rotateIcon {
  from {
    -webkit-transform: rotateZ(0);
       -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
         -o-transform: rotateZ(0);
            transform: rotateZ(0);
  }

  to {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@keyframes rotateIcon {
  from {
    -webkit-transform: rotateZ(0);
       -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
         -o-transform: rotateZ(0);
            transform: rotateZ(0);
  }

  to {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

.rotateIcon {
  -webkit-animation-name: rotateIcon;
     -moz-animation-name: rotateIcon;
       -o-animation-name: rotateIcon;
          animation-name: rotateIcon;
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
       -o-animation-duration: 1s;
          animation-duration: 1s;
}

@-webkit-keyframes unRotateIcon {
  from {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }

  to {
    -webkit-transform: rotateZ(0deg);
       -moz-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
         -o-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}

@-moz-keyframes unRotateIcon {
  from {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }

  to {
    -webkit-transform: rotateZ(0deg);
       -moz-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
         -o-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}

@-o-keyframes unRotateIcon {
  from {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }

  to {
    -webkit-transform: rotateZ(0deg);
       -moz-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
         -o-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}

@keyframes unRotateIcon {
  from {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }

  to {
    -webkit-transform: rotateZ(0deg);
       -moz-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
         -o-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}

.unRotateIcon {
  -webkit-animation-name: unRotateIcon;
     -moz-animation-name: unRotateIcon;
       -o-animation-name: unRotateIcon;
          animation-name: unRotateIcon;
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
       -o-animation-duration: 1s;
          animation-duration: 1s;
}