Stylized 3D Vertical Navigation Menu

A navigation menu help the visitor to navigate through various pages and categories in your website. So here Stylized 3D Vertical Navigation Menu. We have already given many navigation menu. But this menu different from old style. Of course this menu with CSS3 and jQuery. This navigation menu like stairway step. This version of the vertical navigation menu will support IE as well as FirFox, Safari and Chrome. So lets check the Stylish 3D vertical menu.

View Demo

HTML

As usual, here is the html code of this vertical navigation menu. This navigation menu based on nav.

<nav id="example-one">
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
    <a href="#">Navigation</a>
  </nav>  

JavaScript

This script include two vertical menu are example-one and example-two.

<script>
(function() {

$.fn.stairwayNav = function(options) {

  var defaults = {
     stairs: 3
  };
  this.options = $.extend({}, defaults, options);
  var stairs = this.options.stairs;

  var allLinks = this.find("a");

  allLinks
    .mouseenter(function() {
      $(this).addClass("active-1");
      var index = $(this).index(), i, bef, aft;
      for(i = 1; i < stairs; i++) {

        bef = index - i;
        aft = index + i;

        allLinks.eq(aft).addClass("active-" + (i+1));
        if (bef > 0) {
          allLinks.eq(bef).addClass("active-" + (i+1));
        }
      }   
    })
    .mouseleave(function() {
      allLinks.removeClass("active-1 active-2 active-3 active-4");
    });
  return this;
};

$("#example-one").stairwayNav({
  stairs: 2
});

$("#example-two").stairwayNav({
  stairs: 2
});

})();
  </script>

jQuery

<script src="http://code.jquery.com/jquery-latest.js"></script>

CSS

Here are the CSS styles of vertical menu. This make look good.

nav {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
nav a {
  display: block;
  padding: 10px;
  color: white;
  text-decoration: none;
  text-align: left !important;
  position: relative;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  font-family: Magra, Arial;
}

The below CSS code For Demo 1

  #example-one {
  background: #860763;
}
  #example-one .active-1 {
  background: #A8047A;
}
  nav a.active-1 {
  -webkit-transform: scale(1.1) translateX(24px);
  -moz-transform: scale(1.1) translateX(24px);
  -ms-transform: scale(1.1) translateX(24px);
  -o-transform: scale(1.1) translateX(24px);
  transform: scale(1.1) translateX(24px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
  z-index: 3;
}

The below CSS code For Demo 2

#example-two {
  background: #0AACEB;
}
#example-two .active-1 {
  background: #089ED8;
}
#example-two .active-2 {
  background: #0798D1;
}
nav a.active-1 {
  -webkit-transform: scale(1.1) translateX(24px);
  -moz-transform: scale(1.1) translateX(24px);
  -ms-transform: scale(1.1) translateX(24px);
  -o-transform: scale(1.1) translateX(24px);
  transform: scale(1.1) translateX(24px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
  z-index: 3;
}
nav a.active-2 {
  -webkit-transform: scale(1.07) translateX(12px);
  -moz-transform: scale(1.07) translateX(12px);
  -ms-transform: scale(1.07) translateX(12px);
  -o-transform: scale(1.07) translateX(12px);
  transform: scale(1.07) translateX(12px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

[ This coded by css-tricks ]

Hope you enjoyed with new 3D vertical menu, don’t forget to tell thanks and leave a comment  Good luck!!

SHARE

Tweet