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>Four Steps</h2>
  <nav id="example-four">
    <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>
            
          
!
via HTML Inspector

CSS

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

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

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


$exampleFourColor: #666; 
#example-four {
  background: $exampleFourColor;
  .active-1 {
    background: lighten($exampleFourColor, 20%);
    opacity: 1;
  }
  .active-2 {
    background: lighten($exampleFourColor, 15%);
    opacity: .75;
  }
  .active-3 {
    background: lighten($exampleFourColor, 10%);
    opacity: .5;
  }
  .active-4 {
    background: lighten($exampleFourColor, 5%);
    opacity: .25;
  }
}

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 {
      z-index: 3;
    }
    &.active-2 {
      z-index: 2;
    }
    &.active-3 {
      z-index: 1;
    }
    &.active-4 {
      z-index: 1;
    }
  }
}

body { 
  background: #222;
  color: white;
  padding: 20px;
}
body > div {
  width: 20%;
  float: left;
  margin-right: 5%;
}
h1 {
  font-size: 36px;
  margin: 0 0 10px 0;
}
h2 {
  margin: 0 0 10px 0; 
}
nav {
  a {
    @include transition(
      opacity
      100ms
      linear
    );
  }
  &.navhover a {
    opacity: .25;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $.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: 1
});

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

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

$("#example-four").stairwayNav({
  stairs: 4  
});

$("nav").hover(
  function() {
    $(this).addClass("navhover");
  },
  function() {
    $(this).removeClass("navhover");
  }
);
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................