Sliding sidebars that follow the user up and down the page are great for viewing what’s in your shopping cart on e-commerce sites or for site navigation.

This tutorial is based on the menu over at www.kingtray.com.

View Final Demo.

Getting Started

First of all create a new html document and paste in the following. Make sure you link to a copy of jQuery and create a blank JavaScript file called sidebar-slider.js.

<div id="container">
<div id="content">Main Content</div>
<div id="sidebar-container">
<div id="sidebar"></div>
</div>
</div>

On a real site you would obviously have things like a header and footer, but for this tutorial they aren’t needed.

Next we need some basic styling.

#container { left: -92px; margin: 0 auto; position: relative; width: 600px; }
#content { width: 560px; background: #ececec; padding: 20px; }
#sidebar-container { position: absolute; right: -184px; top: 0; width: 171px }
#sidebar { width: 171px; height: 195px; background: #333; top: 100px; position: absolute; }

For this effect to work correctly the sidebar will be absolutely positioned and have negative space on the right and we will need to relatively position the container and add some negative space on the left, to ensure the design is centered

Now we will place the following javascript code in the sidebar-slider.js file that we created earlier.

First of all we declare a couple of variables:

var name = "#sidebar";
var sidebar_top_limit = 100;
var sidebar_top_margin = 20;
var sidebar_slide_duration = 500;

• “name” will be used to select which element will slide up and down the page.
• “sidebar_top_limit” sets how close to the top of the page the sidebar is allowed.
• “sidebar_top_margin” sets the distance from the top of the browser window the sidebar is allowed, while scrolling.
• “sidebar_slide_duration” defines the speed at which the sidebar should slide.

Now we need to add a window scroll function:

$(window).scroll(function() {
});

Inside of this we add:

offset = $(document).scrollTop() + sidebar_top_margin;
if(offset < sidebar_top_limit)
offset = sidebar_top_limit;
$(name).animate({top:offset},{duration:sidebar_slide_duration,queue:false});

The first part applies the top margin for when you are scrolling.

The next part applies the limit of how close to the top of the page the sidebar can go.

The last piece of code sets up the animation, using variables we set up earlier.

View Final Demo.

And there we have it a sliding sidebar that is quick to build and easy to customize.

Normally when you mouse over a list of links, the text/background color might change or even the background image might switch to another image. In this tutorial I will show you how to take a normal list of links and add a hover effect so that the bullet image will slide out and another image will then slide in, thus creating an very cool subtle effect.

View Demo: Here

You will need to have a copy of jQuery and the backgroundPosition plugin.

Javascript

$('#nav a')
	.css( {backgroundPosition: "6px 6px"} )
	.mouseover(function(){
		$(this).stop()
			.animate(
				{backgroundPosition:"(-25px 6px)"},
				{duration:200})
			.animate(
				{backgroundPosition:"(-25px -23px)"},
				{duration:5})
			.animate(
				{backgroundPosition:"(6px -23px)"},
				{duration:200})
			})
	.mouseout(function(){
		$(this).stop()
			.animate(
				{backgroundPosition:"(-25px -23px)"},
				{duration:200})
			.animate(
				{backgroundPosition:"(-25px 6px)"},
				{duration:5})
			.animate(
				{backgroundPosition:"(6px 6px)"},
				{duration:200})
		})

CSS

ul#nav {
	border-top: 1px solid #dfdfdf;
}
 
ul#nav li {
	display: inline;
}
 
ul#nav li a {
	display: block;
	padding: 5px 10px 5px 27px;
	color: #556565;
	text-decoration: none;
	border-bottom: 1px solid #dfdfdf;
	background: url(images/nav-bg.gif) no-repeat 6px 6px;
}
 
ul#nav li a:hover {
	color: #2b5f1a;
	background-color: #e5f3d7;
}

HTML

<ul id="nav">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Downloads</a></li>
	<li><a href="#">Contact</a></li>
</ul>

Learn how to add a cool popup bubble to an RSS feed link using jQuery.

View Demo

Javascript

$(document).ready(function(){
 
$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
});
 
});

HTML

<div class="rss-popup">
<a href="feed-link" id="rss-icon">RSS Feed</a>
<em>Subscribe to our RSS Feed</em>
</div>

CSS

.rss-popup {
margin: 100px auto;
padding: 0;
width: 100px;
position: relative;
}
 
div.rss-popup em {
background: url(bubble.png) no-repeat;
width: 100px;
height: 49px;
position: absolute;
top: -70px;
left: -0px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
 
#rss-icon {
width: 42px;
height: 42px;
background: url(icon.png) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}

And there you have it. This technique could be used for lots of other things. Experimenting is the best way to learn new techniques, so go on, see what you can come up with.

View Demo

UPDATE: Thanks to Reinaldo the the issue when repeatedly moving the mouse past the link has been fixed.