CodePen

HTML

            
              <h1>Stairway Nav</h1>

<div>
  <h2>One Step</h2> 
  <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>  
</div>

<div>
   <h2>Two Step</h2>
  <nav id="example-two"> 
    <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>
</div>

<div>
   <h2>Three Steps</h2>
  <nav id="example-three"> 
    <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>
</div>

<div>
  <h2>Six Steps - Crazy</h2>
  <nav id="example-six">
    <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>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              $exampleOneColor: #f06d06;
#example-one {
  background: $exampleOneColor;
  .active-1 {
    background: lighten($exampleOneColor, 15%);
  }
}

$exampleTwoColor: #0dacc4;
#example-two {
  background: $exampleTwoColor;
  .active-1 {
    background: lighten($exampleTwoColor, 19%);
  }
  .active-2 {
    background: lighten($exampleTwoColor, 8%);
  }
}

$exampleThreeColor: #1acd0d;
#example-three {
  background: $exampleThreeColor;
  .active-1 {
    background: lighten($exampleThreeColor, 15%);
  }
  .active-2 {
    background: lighten($exampleThreeColor, 10%);
  }
  .active-3 {
    background: lighten($exampleThreeColor, 5%);
  }
}


$exampleSixColor: #666; 
#example-six {
  background: $exampleSixColor;
  .active-1 {
    background: lighten($exampleSixColor, 30%);
  }
  .active-2 {
    background: lighten($exampleSixColor, 25%);
  }
  .active-3 {
    background: lighten($exampleSixColor, 20%);
  }
  .active-4 {
    background: lighten($exampleSixColor, 15%);
  }
  .active-5 {
    background: lighten($exampleSixColor, 10%);
  }
  .active-6 {
    background: lighten($exampleSixColor, 5%);
  }
}

nav {
  @include transform(translate3d(0, 0, 0));
  a {
    display: block;
    padding: 10px;
    color: white;
    text-decoration: none;
    position: relative;
    @include transition(all 0.2s ease);
    &.active-1 {
      @include transform(
        scale(1.11)
        translateX(24px)
      );
      box-shadow: 0 0 10px rgba(black, 0.75);
      z-index: 3;
    }
    &.active-2 {
      @include transform(
        scale(1.09)
        translateX(15px)
      );
      box-shadow: 0 0 10px rgba(black, 0.5);
      z-index: 2;
    }
    &.active-3 {
      @include transform(
        scale(1.07)
        translateX(10px)
      );
      z-index: 1;
    }
    &.active-4 {
      @include transform(
        scale(1.05)
        translateX(6px)
      );
      z-index: 1;
    }
    &.active-5 {
      @include transform(
        scale(1.03)
        translateX(3px)
      );
      z-index: 1;
    }
    &.active-6 {
      @include transform(
        scale(1.01)
        translateX(1px)
      );
      z-index: 1;
    }
  }
}

body { 
  background: #222;
  color: white;
  padding: 20px;
}
body > div {
  width: 15%;
  float: left;
  margin-right: 5%;
}
h1 {
  font-size: 36px;
  margin: 0 0 10px 0;
}
h2 {
  margin: 0 0 10px 0; 
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $.fn.stairwayNav = function(options) {
  
  options = $.extend({
     stairs: 3
  }, options);

  var stairs = options.stairs;
  var allLinks = this.find("a");
  
  var removeClasses = function () {
    allLinks.prop('class', function (i, v) {
        return v.replace(/\bactive-\d+\b/, '');
    });
  };
    
  allLinks.mouseenter(function() {
    var index = $(this).index(), i, bef, aft;

    removeClasses();
    $(this).addClass("active-1");

    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));
      }
    }   
  });

  return this.mouseleave(removeClasses);;
};

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

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

$("#example-three").stairwayNav({
  // Default is 3
});

$("#example-six").stairwayNav({
  stairs: 6  
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................