Stairway Hover Nav

Developer
Chris Coyier
Size
3,213 Kb
Views
131,560
  1. Stairway Hover Nav Previews
  2. Stairway Hover Nav HTML Codes
  3. Stairway Hover Nav CSS Codes
  4. Stairway Hover Nav JS Codes

How do I make an stairway hover nav?

Now a jQuery plugin.. What is a stairway hover nav? How do you make a stairway hover nav? This script and codes were developed by Chris Coyier on 04 July 2022, Monday.

Stairway Hover Nav Previews
IQ Test

Stairway Hover Nav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Stairway Hover Nav</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Stairway Hover Nav - Script Codes CSS Codes

#example-one { background: #f06d06;
}
#example-one .active-1 { background: #fa9748;
}
#example-two { background: #0dacc4;
}
#example-two .active-1 { background: #40dbf2;
}
#example-two .active-2 { background: #10ceea;
}
#example-three { background: #1acd0d;
}
#example-three .active-1 { background: #41f234;
}
#example-three .active-2 { background: #2bf11c;
}
#example-three .active-3 { background: #1de50f;
}
#example-four { background: #666;
}
#example-four .active-1 { background: #999999;
}
#example-four .active-2 { background: #8c8c8c;
}
#example-four .active-3 { background: gray;
}
#example-four .active-4 { background: #737373;
}
nav { -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
nav a { display: block; padding: 10px; color: white; text-decoration: none; position: relative; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
nav a.active-1 { -moz-transform: scale(1.1) translateX(24px); -ms-transform: scale(1.1) translateX(24px); -webkit-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 { -moz-transform: scale(1.07) translateX(12px); -ms-transform: scale(1.07) translateX(12px); -webkit-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;
}
nav a.active-3 { -moz-transform: scale(1.04) translateX(4px); -ms-transform: scale(1.04) translateX(4px); -webkit-transform: scale(1.04) translateX(4px); transform: scale(1.04) translateX(4px); z-index: 1;
}
nav a.active-4 { -moz-transform: scale(1.01) translateX(2px); -ms-transform: scale(1.01) translateX(2px); -webkit-transform: scale(1.01) translateX(2px); transform: scale(1.01) translateX(2px); 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;
}

Stairway Hover Nav - Script Codes JS Codes

$.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
});
Stairway Hover Nav - Script Codes
Stairway Hover Nav - Script Codes
Home Page Home
Developer Chris Coyier
Username chriscoyier
Uploaded July 04, 2022
Rating 4.5
Size 3,213 Kb
Views 131,560
Do you need developer help for Stairway Hover Nav?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Coyier (chriscoyier) Script Codes
Name
Make This Responsive
Airtable Emoji Poll
Simple jQuery Slideshow
Three-Line Menu Icon, Various Techniques
Glowing Blue Inputs
Transformer Tabs
Filtered Search RWD Pattern
Striped Headers
Vertical-align examples
A Pen by Chris Coyier
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!