Advertisement
JavaScript & AJAX

How To Create A 'Mootools Homepage' Inspired Navigation Effect Using jQuery

by

As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I've always liked the way the menu on MooTools worked. So in this tutorial we'll recreate that same effect ... but we'll do it in jQuery!


Demo and Source Code



Step 1

Let's begin by writing the necessary HTML to create a simple vertical navigation. For the structure, as you may have guessed, we will use an unordered list <ul> with the ID name "sliding-navigation". Also, we will add some links and give each list item <li> the class name "sliding-element".

I'm also going to add in a title element. This is a useful thing to do as many WordPress blogs for example have title elements in their sidebar navigation (e.g. "Archives"). So it would look something like this:

<ul id="sliding-navigation">
	<li class="sliding-element"><h3>Navigation Title</h3></li>
	<li class="sliding-element"><a href="#">Link 1</a></li>
	<li class="sliding-element"><a href="#">Link 2</a></li>
	<li class="sliding-element"><a href="#">Link 3</a></li>
	<li class="sliding-element"><a href="#">Link 4</a></li>
	<li class="sliding-element"><a href="#">Link 5</a></li>
</ul>

Step 2

Now, let's create a HTML document where we can put the work we just did. Create a new HTML file and call it demo.html. Then open this file with your favorite text editor and insert the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>Navigation Effect Using jQuery</title>
		<link rel="stylesheet" type="text/css" href="styles.css" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="sliding_effect.js"></script>
	</head>
	<body>
		<div id="navigation-block">
            <ul id="sliding-navigation">
                <li class="sliding-element"><h3>Navigation Title</h3></li>
                <li class="sliding-element"><a href="#">Link 1</a></li>
                <li class="sliding-element"><a href="#">Link 2</a></li>
                <li class="sliding-element"><a href="#">Link 3</a></li>
                <li class="sliding-element"><a href="#">Link 4</a></li>
                <li class="sliding-element"><a href="#">Link 5</a></li>
            </ul>
        </div>
	</body>
</html>

There are a few things to note here:

  1. The !DOCTYPE for our demo.html file is set to XHTML 1.0 Strict. This is not required for the effect to work but I try to get in the habit of using it as much as I can.
  2. You may have notice that the <link> tag is refering to a file called style.css. However, no such file exists. No worries though, that is the next step.
  3. Finally I've wrapped my navigation block into a <div>. We'll make use of this later to position the block on the page.

Step 3

Now that we have our HTML file labelled and working, let's add some styles. Remember that our HTML document is pointing to a CSS file called styles.css. So, let's begin by creating a file called styles.css and saving it in the same directory where our HTML document lives. As we did in the previous step, open this file with your favorite text editor and insert the following code:

body 
{
	margin: 0;
	padding: 0;
	background: #1d1d1d;
	font-family: "Lucida Grande", Verdana, sans-serif;
	font-size: 100%;
}

ul#sliding-navigation
{
	list-style: none;
	font-size: .75em;
	margin: 30px 0;
}

ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
	display: block;
	width: 150px;
	padding: 5px 15px;
	margin: 0;
	margin-bottom: 5px;
}

ul#sliding-navigation li.sliding-element h3
{
	color: #fff;
	background: #333;
	border: 1px solid #1a1a1a;
	font-weight: normal;
}

ul#sliding-navigation li.sliding-element a
{
	color: #999;
	background: #222;
	border: 1px solid #1a1a1a;
	text-decoration: none;
}

ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }

Step 4

At this point your demo.html page should be looking something like this:

Demo Preview

So, it is finally time to begin using jQuery. But before we can get started we need to do a few of things:

  1. Download the latest version of jQuery.
  2. Create a new file called sliding_effect.js and save it in the same directory as that of your HTML and CSS file.
  3. Lastly, insert the two previous files to your HTML document's <head>.

This is what your HTML file's <head> should look like now:

	<head>
		<title>Navigation Effect Using jQuery</title>
		<link rel="stylesheet" type="text/css" href="styles.css" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="sliding_effect.js"></script>
	</head>

Step 5

Now, we will create the function that will do all the "heavy" lifting for the sliding effect to work. This function will take five parameters (navigation_id, pad_out, pad_in, time, and multiplier) and use them as follows:

  1. navigation_id: This is the ID name of the navigation, which contains the elements the effect will be applied on.
  2. pad_out: This is the number of pixels to be padded left when one of the links inside the navigation is hovered.
  3. pad_in: This is the number of pixels to be padded left when one of the links inside the navigation is no longer being hovered.
  4. time: This represents the amount of time (in milliseconds) that takes for one of the link elements to slide in and back in to place when the page is loaded.
  5. multiplier: The job of the multiplier is to increase or decrease the amount that takes the a following link element to slide in to the screen. In other words, if the multiplier is 1, all link elements will slide in to the screen in equal time intervals. However, if it is less than 0, the subsequent link elements will slide in faster, and if it is more than 1 the opposite will happen.

So, open your sliding_effect.js file and insert the following code:

function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
	// creates the target paths
	var list_elements = navigation_id + " li.sliding-element";
	var link_elements = list_elements + " a";
	
	// initiates the timer used for the sliding animation
	var timer = 0;
	
	// creates the slide animation for all list elements 
	$(list_elements).each(function(i)
	{
		// margin left = - ([width of element] + [total vertical padding of element])
		$(this).css("margin-left","-180px");
		// updates timer
		timer = (timer*multiplier + time);
		$(this).animate({ marginLeft: "0" }, timer);
		$(this).animate({ marginLeft: "15px" }, timer);
		$(this).animate({ marginLeft: "0" }, timer);
	});

	// creates the hover-slide effect for all link elements 		
	$(link_elements).each(function(i)
	{
		$(this).hover(
		function()
		{
			$(this).animate({ paddingLeft: pad_out }, 150);
		},		
		function()
		{
			$(this).animate({ paddingLeft: pad_in }, 150);
		});
	});
}

Step 6

All we need to do in order to trigger the script is call the function when the page has loaded. There are two place to put the following snippet of code. It can either be written inside the sliding_effect.js file (I chose this option for this tutorial) or called within the HTML using a <script> tag. Either case will use the same code, which is as follows:

$(document).ready(function()
{
	slide([navigation_id], [pad_out], [pad_in], [time], [multiplier]);
});

Step 7

Finally we'll add a bit of style to the page to make it look slightly more glamourous. First I've created an image block that looks like this:

The image has a faint gradient, a highlight line, is 190px wide and called "background.jpg". The idea will be to position this to the left of our navigation so that the buttons slide in under it. We'll also add a little heading title to the page. So our HTML becomes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>Navigation Effect Using jQuery</title>
		<link rel="stylesheet" type="text/css" href="styles.css" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="sliding_effect.js"></script>
	</head>
	<body>
		<div id="navigation-block">
        	<img src="background.jpg" id="hide" />
            <h2><span>Navigation Effect Using jQuery</span></h2>
            <p>By Bedrich Rios</p>
            <ul id="sliding-navigation">
                <li class="sliding-element"><h3>Navigation Title</h3></li>
                <li class="sliding-element"><a href="#">Link 1</a></li>
                <li class="sliding-element"><a href="#">Link 2</a></li>
                <li class="sliding-element"><a href="#">Link 3</a></li>
                <li class="sliding-element"><a href="#">Link 4</a></li>
                <li class="sliding-element"><a href="#">Link 5</a></li>
            </ul>
        </div>
	</body>
</html>

Notice that I've added the image inside the "navigation-block" element and give it an ID called "hide". Also I've added a heading element and subtitle. Now we add a bit of extra CSS to our styles.css file as follows:


h2 	
{ 
	color: #999;
	margin-bottom: 0; 
	margin-left:13px;
	background:url(navigation.jpg) no-repeat;
	height:40px;
}

h2 span
{
	display: none;
}

p	
{ 
	color: #ffff66; 
	margin-top: .5em;
	font-size: .75em;
	padding-left:15px;	
}

#navigation-block {
	position:relative;
	top:200px;
	left:200px;
}

#hide {
	position:absolute;
	top:30px;
	left:-190px;
}

So first in the <h2> element, we have set the HTML text to vanish using "display:none" and set a background image of some nicer looking text I prepared earlier.

Also notice that the "navigation-block" element now has a relative position, so that we can move the "hide" image over to the left. This will make the tabs appear from under it.

Lastly to give our tabs a bit of finish I've added a subtle background image that looks like shading like this:

ul#sliding-navigation li.sliding-element h3
{
	color: #fff;
	background:#333 url(heading_bg.jpg) repeat-y;
	font-weight: normal;
}

Finished

And we're done!

View the Final Effect

Download the HTML/Images/JS

Related Posts
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Web Design
    HTML/CSS
    Build a Top Bar Off-Canvas Navigation With Foundation 5Foundation menu
    Today, we are going to combine ZURB's Foundation 5 Off-Canvas feature with our top bar navigation. The result will be a nice custom navigation for desktop users and a sleek off -canvas menu for tablet and mobile users. Read More…
  • Web Design
    Case Studies
    How They Did It: Typekit's New HomepageTypekit retina
    Typekit recently redesigned their homepage with some new services in mind. When Typekit joined Adobe, they set out to bring us a new way to handle fonts on the web. Not only did they create a fairly simple way to embed fonts on the web, but they have now officially launched a desktop sync option, which allows Creative Cloud subscribers to sync fonts to their computer directly from Typekit. This has been in a beta form for a while now, and provides a much easier route to local fonts than finding them elsewhere!Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Web Design
    UX
    Implementing the Float Label Form PatternForm float input retina
    Using Matt Smith’s mobile form interaction design as a guide, we will create a stunning form interaction for the web that’s both beautiful and accessible using HTML, CSS and JavaScript.Read More…