Sticky jQuery WordPress Post Navigation Buttons

Here’s a sticky next/previous navigation that I designed for the new Durkan Group website. Here is the simplest form of the code that I used, but for the new Durkan website I integrated it with the “next” and “previous” post links to create some sticky buttons in fixed position on the right side of the screen. I used jQuery Waypoints to make the navigation stick to it’s vertical position once it reached 200 pixels from the top of the browser window. You can see a working version of this here.

Skills Required: html, css, jQuery

The HTML

[raw]






The CSS


nav.slide-nav {
	position: fixed; 
	top: 50px; 
	right: 0; 
	width: 50px;
	height: 150px;
	text-align: center; 
	cursor: pointer;  
	line-height: 50px;
}

nav.slide-nav .item, 
nav.slide-nav .trigger,
nav.slide-nav .slideout {	
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	right: 0;
}

nav.slide-nav .item {height: 50px;width: auto;background: #dedede;}
nav.slide-nav .trigger {width: 50px; height: 50px; z-index: 2; background: #dedede;}
		
nav.slide-nav .top {top: 0;}
nav.slide-nav .middle  {top: 50px;}
nav.slide-nav .bottom {top: 100px;}

nav.slide-nav .slideout {
	background: #999;
	right: 50px;
	width: 0;
	white-space: nowrap;
	z-index: 1;
}

nav.slide-nav .item.top .slideout,
nav.slide-nav .item.bottom .slideout {height: 50.5px;}
nav.slide-nav .slideout a {display: inline-block; line-height: 50px; width: 150px;}

The jQuery


$( document ).ready(function() {
        $('.item').hover(
		function() { $(this).children().first().animate({width: 150}, 200); },
		function() { $(this).children().first().animate({width: 0}, 200); }
	);
});

[/raw]

Leave a Reply

Your email address will not be published. Required fields are marked *