How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

on May 10th 2008 with 243 comments
Tutorial Details
  • Technology: jQuery, HTML, CSS
  • Difficulty: Intermediate
  • Completion Time: 1-2 hours

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

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

My name is Bedrich (@bedrios) — as in Bed an Rich — and I design and develop web sites for a living.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
Newer Comments →
  • Rant

    Nice but why no active css example?

  • http://www.Grimegenre.com/CBDESIGNS CB-DESIGNS

    Hi I Would Like To See More TUTS On Myspace A Lot Attention Is Nowadays Being Turnt To Myspace And It Involves A Lot Of CSS/HTML Codes For Layouts

    CBDESIGNS

    http://www.GrimeGenre.com/CBDESIGNS

  • Tyler Bramer

    Great way to add a simple effect. Thanks.

  • http://www.mamjed.com mamjed

    maybe a follow up on adding sub navigation with a similar effect of perhaps a fade?

  • http://avinashv.net Avinash

    Someone’s written a jQuery library to handle the hard work of your “slide” function. I refer to it in a tutorial.

  • http://fire.armcandy.fr nb

    nice menu, like it.

    not really on topic but i’ll just add this to the css (if you’re not a valid css freak)

    a:active { outline: none; }
    a:focus { -moz-outline-style: none; }

    so you don’t get the dotted border on click with ff ^_^

  • daniel

    Muchas Gracias !!!

  • http://www.macnewsonline.com Nick

    I love jquery!

  • http://sixrevisions.com Jacob Gube

    Awesome… Someone should do a tutorial on how to skin a wordpress from start to finish or an oscommerce. Seems to be what everyone is looking for. That would be sweet.

    I’ve been tinkering around the idea of creating a WordPress theme from scratch, start to finish. I’ve written parts of it but it’s a tremendous task.

    As for oscommerce, I never really liked creating themes for it, neither for Zen Cart (it’s derivative). I think it’s more worthwhile to invest time in learning Magento – http://www.magentocommerce.com/

    Would there be an interest in a Drupal “start to finish” theming tutorial?

  • Muhammad

    Anyone interested in doing a textpattern tutorial?

  • http://CommingSoon Daniel Buchner

    Because of the animate reference instead of a true Penner based easing function, I presume, the menu tabs continue to jiggle uncontrollably if you move over them a bit and then exit the menu. I have seen a lot of this porting of scripts from Mootools lately and I am starting to wonder why there are so many people switching over. For some reason I can always tell if a site’s effects are done in Libs other than Moo, they are usually way more jumpy and jerkish than their Moo counter parts. Whatever though, I’ll stick with Moo 1.2 and its native iframe class, swiff object native, and ridiculous effect goodness anyday over 30k jQuery and the other 100k they don’t tell you about from includes like jQ Interface that it needs to get it up to snuff. :)>

  • lethrj

    I have always enjoyed the fact that mootools.net showcases some of its most sought-after effects. I don’t know if anybody remembers their old site design, but it was pretty great as well. We should all be thankful for Valerio and John Resig. I know I am.

  • deep

    is it possible to use this effect by replacing the text with an image? like a button that i have created in photoshop??

  • http://www.visual-masters.nl Justin

    Which font dit you use for the heading: Navigation Effect using jQuery? I can’t get it matching with the arial?

  • http://pickysurfer.com Danny

    I just love using mootools… :)

  • Evan

    Yeah, totally… what is the name of that font used in navigation.jpg?

  • http://www.creative451.com Creative451

    Hey guys… Off the top of my head (Evan/Justin) I’d say that font was something like Helvetica Neue (45 = Ultra Light)… Want me to check for you?

  • http://www.k0d3rs.com.ar Iuga

    GRACIAS !!! Excelente creacion …

  • Edward

    Was wondering how this script would run with 2 menus in two different DIV?

    one menu works the other doesnt?

  • Khalid

    Great tut. I put it together and everything worked, excepted when I tried to add it to a page with other “cool effects” from this website. The first thing I thought was that my site was disorganized and looked like a hurricane had plowed through. After organizing everything and updating I still couldn’t get it to work, thanks for any help you can provide :)

  • Jonathan Merriweather

    A fix for IE6:

    change
    line 14: $(this).css(“margin-left”,”-180px”);
    to
    line 14: $(this).css(“margin”,”0px 0px 5px -180px”);

  • http://www.anasatzqui.net/ Lashan

    Very cool effect.

    I used it here – http://diamondandgembox.com/

    • amnesia7

      Had a quick look, you forgot to apply the effect to the Custom Order page

    • Ryan

      love this site dude

  • turu

    so cool !

  • elvisparsley

    I have seen this in moord.com which uses mootools.
    Unfortunately none of them work in IE6 as you expect.
    Time will come for me to use in future.

  • http://www.windows7themes.com Windows Themes

    I like the effect, well done! Thanks

  • http://www.deamerica.org Jersey

    high level, thanks for you contribution.

  • http://www.alojaweb.pe Alojaweb

    excellent work, thanks i need this effect

  • http://livingsweb.net Jeff Livings

    Thanks for this. I’ve put it to use on several of my projects because it adds a little flair without being in the way.

  • Rodney

    lovely tut!

    Since this is the right forum, was wondering if there is anyone who can help in doing a sliding menu like seen at http://www.deviantart.com ?

  • Nilsko

    Does anyone know how to fix so that the horizontal scroller disappears from safari? The #navigation-block is extremely wide and I cant seem to fix it.

  • http://www.ruiserra.com Rui Serra

    Hi,
    I’ve found this wonderful navigation menu, but i’ve one problem, and i think you too.
    Were can i modify the code for that the horizontal scroll bar disappear.
    The bar appears and there is no need.
    How can i put some code below the whole thing? A line with my name for example, at the bottom of all the code. I put t, but it wont appear.

    Thank you

    Rui Serra

  • MightyMike

    Hi, great effect!
    I was just wondering how to change one thing.
    My nav is on the right side of the webpage, and i need to change the animation on the other way.
    The Slide toward left instead toward right.
    Any help?
    thx
    p.s.
    sry for the poor english

  • Pingback: Creare una HomePage in stile MooTools! | LifeStyle Web

  • Pingback: Web Mahsülleri Ofisi » Blog Archive » JQuery ile Flash’ı aratmayacak menüler

  • Lelyn Tyson

    FYI for anyone using the downloaded source vs. the source listed on this page:

    the styles.css file in the zip contains this rule:

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

    while the the above example code is this:
    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;
    }

    note the padding difference of 18px vs. 15px.
    the correct value is 15px. The download file’s value of 18px causes the menus to have a 3px difference in width after they have been hovered vs. before they were hovered. This also causes a mix-match in width between items that have and have not been hovered on.

    Also – the 1px border placed on ‘a’ elements vs no border on the ‘h3′ elements cause the navigation title to be 2px less width the the menu items below it. I solved this simply by also adding a 1px border the the ‘h3′.

    Both the ui ‘glitches’ are visible with the naked eye, and are present on the demo page. They are less noticeable with the demo’s dark-on-dark scheme, but are extremely evident when using a more contrasting color combination.

  • http://pw-software.com NetOperator Wibby

    This is pretty sweet. I’ll be coming back to this blog more frequently now.

  • Pingback: CSS Sprites2 - It’s JavaScript Time « Battilani’s Weblog

  • http://www.samuellavoie.com/ Samuel Lavoie

    Very nice tutorial, jQuery as always offer nice javascript animation, flash alike :D
    Any tips to bring this as a horizontal navigation with li sliding down?

  • Pingback: AndySowards.com :: Web Development Nerdy Daily Links For 11/10/2008 | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

  • Pingback: 300+ Jquery, CSS, MooTools and JS navigation menus | 1stwebdesigner

  • http://www.seoweb.pe seoweb

    jQuery is powerfull, excellent article.

    Thanks

  • Pingback: 300+ Jquery, CSS, MooTools and JS navigation menus | Neurosoftware web dev

  • a2DAb

    thats mad, thanks heaps man, should look good anywhere

  • Olivvv

    you should kill the timers on mouseout or reduce the queue to 1, because currently the menu is ectatic if its being hovered repeatedly and fast in and out

  • http://han4u.blogspot.com ChanHan Hy

    It looks very nice.

  • Pingback: The html blog | Bubble menu javascript or playing with YUI’s event delegation

  • Pingback: In the Wild for November 26, 2008 » Yahoo! User Interface Blog

  • http://www.as7ap4you.com kareem

    this is wonderful tutorial i will put acopy of this lesson on
    my site here
    http://www.as7ap4you.com

  • Pingback: 13 Excellent Tutorials On Creating jQuery Navigation Menu | DeveloperFox

  • http://www.sanathlk.com Sanath Peiris

    great tutorial, thanks

← Older Comments
Newer Comments →