How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery
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:
- 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.
- 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.
- 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:
So, it is finally time to begin using jQuery. But before we can get started we need to do a few of things:
- Download the latest version of jQuery.
- Create a new file called sliding_effect.js and save it in the same directory as that of your HTML and CSS file.
- 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:
- navigation_id: This is the ID name of the navigation, which contains the elements the effect will be applied on.
- pad_out: This is the number of pixels to be padded left when one of the links inside the navigation is hovered.
- 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.
- 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.
- 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!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Bedrich Rios
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Can you please tell me how to make an “active,” i.e., non-animating link when the desired link is navigated, and stay in the hovered state? Sorry if this is redundant, but I’m really looking for an answer. Thanks so much! Great tutorial, very easy to follow.
I would trigger the AddClass(http://api.jquery.com/addClass/) from jQuery API upon the click event.
something like this:
$(document).ready(function()
{
slide([navigation_id], [pad_out], [pad_in], [time], [multiplier]);
$(‘li.sliding-element a’).click(function() {
$(‘li.sliding-element a’).removeClass(‘current’); //removes ‘current’ class from all elements
$(this).addClass(‘current’); //adds ‘current’ class to clicked element.
});
});
and the css would reflect the hover-state style as defined in the tutorial function.
li.sliding-element a.current {
color:#FFFF66;
padding-left: 25px;
}
Not tested, but pretty sure it is working.
$(‘li.sliding-element a’).removeClass(‘current’); //removes ‘current’ class from all elements
$(this).addClass(‘current’); //adds ‘current’ class to clicked element.
});
I’d like to delay the loading of this menu a couple of seconds so the main part of the site is loaded before the menu rolls in. That would make this menu look even nicer I think.
What would be the best solution to do this?
Great tutorials, I have used it in the development of my own site. I have managed to get it working great in Firefox and Safari but have issues in IE, It seems to position itself too far left under my mask. Do you have any ideas what it could be? I have tried everything with no luck so far!
http://www.genusdesign.com/genus2010/
Great article! Were using this technique on our online jQuery menu generator tool. jQuery is pretty freaking awesome! I expect to see it used more and more as it is a great alternative for Flash in many cases.
How can you get this working the opposite way so menu items fly in from right to left, fo rmenu’s situated on the right hand side of a page? I’ve tried changing the numbers and paddingleft to paddingright but no dice.
ruby -v will still show me ruby 1.8.7, not the installed 1.9.1
ruby19 -v throws out an erro
uby -v will still show me ruby 1.8.7, not the installed 1.9.1
ruby19 -v throws out an erro
Great tutorial. Would anyone please write me, what kind of font is being used for the title ‘Navigation effect using jQuery’ in demo page?
thanks a lot fot reply
nice tut …
I was wondering if anyone had experience with this in WordPress.
I am trying to get this script working and I obviously changed the .js file to reflect:
jQuery(document).ready(function($){
slide(“#sliding-navigation”, 25, 15, 150, .8);
});
But it’s still now working…
any ideas?
Nevermind, I figured out it was a Jquery version conflict :)
jazz,
I’m having trouble getting the ‘sliding-navigation’ to work. I was wondering how you resolved your version conflict (i.e., did you have multiple ‘jquery*.js files in a folder?).
Can you expound on how you resolved this issue. im a jquery noob
You need to change the code to the following so it’s conflict free:
jQuery.noConflict(); jQuery(document).ready(function(){
slide(“#sliding-navigation”, 25, 15, 150, .8);
});
Then change all the ‘$’ to ‘jQuery’ in the remaining code in sliding_effect.js
:)
Made a slight alteration to stop the animation from repeating after mouseover, I’m new to this so don’t know if you guys need to know this or not…
inside “sliding_effect.js” added the “dequeue” command
// creates the hover-slide effect for all link elements
$(link_elements).each(function(i)
{
$(this).hover(
function()
{
$(this).dequeue().stop().animate({ paddingLeft: pad_out }, 150);
},
function()
{
$(this).animate({ paddingLeft: pad_in }, 150).dequeue();
});
});
}
Thanks for the tutorial. I made submenus and I have a lot of bugs… any idea how to fix this?
This is a very good creative work on batman. Thanks
creative work on batman. Thanks
Seems to conflict with jquery masonry.
and how the works in mootools?
Ive turned this function into a jQuery plugin. Allowing easier customization.
(function($) { $.fn.extend({ slide: function(options) { var defaults = { pad_out: 25, pad_in: 15, time: 150, multiplier: .8 } var ops = $.extend(defaults, options); return this.each(function() { var $list_elements = $(this).find('li'); var $link_elements = $list_elements.find('a'); var timer = 0; $list_elements.each(function() { $(this).css("margin-left","-180px"); timer = (timer*ops.multiplier + ops.time); $(this).animate({ marginLeft: "6px" }, timer); $(this).animate({ marginLeft: "845px" }, timer); $(this).animate({ marginLeft: "6px" }, timer); }); $link_elements.each(function() { $(this).hover( function() { $(this).animate({ paddingLeft: ops.pad_out }, 150); }, function() { $(this).animate({ paddingLeft: ops.pad_in }, 150); } ); }); }); } }); })(jQuery);Called by:
$(document).ready(function() { $('#sliding').slide(); });And to adjust some defaults.
$(document).ready(function() { $('#sliding').slide({ time: 50, multiplier: .6 }); });What if I want the nav to float right? This makes things much more complicated and I am having a hard time figure it out. Can anyone help?
Anyone know how to add a link to the h3 nav bar items and have them still look like the title bar?
Hi as I was working with the menus i found that is not compatible for IE6 it does not work smoothly I found a solution which makes it working smoothly on IE6 too.
Yours css
ul#sliding-navigation li.sliding-element a
{
display: block;
width: 150px;
padding: 5px 15px;
margin: 0;
margin-bottom: 5px;
}
In this instead of putting “margin-bottom: 5px;” make it “margin-top: 5px;”
and then check it will start working in IE6 too. Hope you find its useful .
Thanks,
Bharat
Hi Bharat,
Thanks a lot for the post. It was very useful.
Anusha
I have a problem when implementing it in WordPress. I am using it in a left sidebar, but when I click on a link it seems as if the sidebar gets reloaded and then looses the focus and therefore the link i click isn’t shown as “active”. Does anybody know a solution for this?
Sorry for my bad english.
I just implemented this along with an older version of jQuery lightbox on http://miracleflooring.ca/template/
Very nice script!
How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery post for thanx.
Used it in the reconstruction of my site. I have managed to get it working great in Mozilla but having some difficulties with IE.
Anybody can help.
Hello Mr.Bedrich, I did some changes on your inspiring menu.
1- i’m using it on the right part of some site i’m working on (just switching to right the lefts… and floating all you need to float) just wanted to clarify if someone notices my code is different.
2.- i’m using it with a little delay, so if for any reason, the browser freezes on loading, visitors can still enjoy the NICE initial ‘wave’ effect flawlessly.
$(this).css(“right”,”-180px”).delay(300);).
3- on the initial ‘wave’ effect, i’m animating the padding of the inner elements of the li (list_elements + ” *”), this way you won’t see the point of the menu de-attach from the cover (argh, my english sucks), anyway I hope I made myself clear, if someone is aiming to this behavior in the initial animation, this is a way you can go with.
var all_elements = list_elements + ” *”;
var mwidth = $(link_elements+”:first”).width();
// initiates the timer used for the sliding animation
var timer = 0;
// creates the slide animation for all list elements
$(all_elements).each(function(i)
{
// margin left = – ([width of element] + [total vertical padding of element])
$(this).css(“right”,”-180px”).delay(300);
// updates timer
timer = (timer*multiplier + time);
$(this).animate({ right: “0px” }, timer);
$(this).animate({ paddingRight: pad_out }, timer);
$(this).animate({ paddingRight: pad_in}, timer);
});
How could I take this menu and add sub navigation that pops out to the right with the same effect?
It is very interesting. It is a n inspiration like new web developers like me.
Thank you very much for taking the time to create this tut. For new-comers like me, these are so valuable.
How could I take this menu and add sub navigation that pops out to the right with the same effect? Please help!
many thanks for this menu
is very nice
thanks, it`s great!
what font did you use in demo presentation for “Navigation text” ?
This is beyond awesome! Thank you very much! =D
Thank you so much, I was looking for something just like this. It was easy to implement and it looks great, it’s awesome people like you that make the web community better, thanks again :-)
thanks! it’s beatiful!
Great! THX!
nice topic
Thanks
my site :
http://www.edku.net
http://www.nwahy.info
http://www.mallarb.com
http://www.feinakhabiby.com
Hi there!
I would like to ask if we can use this menu for commercial projects? Or is this only for your personal use?
沈阳二手房因为张学良故乡的缘故，使许多人慕名而来，加上沈阳景色优美，冬天虽冷却也宜人。沈阳二手房有着古老建筑艺术在，从前林徽因就一度热衷这里。不显露不张扬，厚重稳实是沈阳二手房独特的个性。
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.
Since var timer was set to zero, doesn’t it make the multiplier useless with the line:
timer = (timer*multiplier + time); ?
This is my simple code work as same as this tute..
* { margin:0; padding:0;}
body { font-family:Arial, Helvetica, sans-serif; background:#000;}
ul li { list-style:none; padding-left:5px; margin-bottom:5px; width:300px; border:1px solid #333333; }
ul li a { color:#333333; text-decoration:none; }
$(document).ready(function() {
$(“.tabs li a”).mouseover(function() {
$(this).animate({‘padding-left’: ’50px’});
$(this).parent().animate({‘width’: ’400px’});
});
$(“.tabs li a”).mouseout(function() {
$(this).animate({‘padding-left’: ’5px’}); //.dequeue();
$(this).parent().animate({‘width’: ’300px’});
});
});
Gallery
Submit
Resources
Contact
This is really awesome, I’m using it for my very first website designing! But something just occured that I couldn’t fix… I did excatly what you wrote here everything is fine in my sidebar except for the text, when hovering on the menu the text like Home will not move with the entire block to the right…
What do you think the problem is there?
Any suggestion will be appreciated..
How to add sub links/sub navigation with the same effect in this nav bar?
Sharee, did you get achance to figure this out, can you throw some light on this.
Help needed
Thanks in advance
This is great. Thanks!
Great tuttorial for all newbies and pros
Back here again, thanks for great tuts.
hi.
thank you for this tutorial :)
i do have a question: is there a way to change the effect to be on the right ? (it moves to the left now…)
thanks,
oren
Hi,
can someone tell me how to avoid the glitch when I mouseOver the left part of my buttons?
It’s like the hitzone move on the right (caused by the animation of the button) and then my mouse is no longer in the hitzone so it repeat the animation for ever.
Here’s my site : http://collivore.ca/portfolio/
Thanks in advance!!
Isa
hi,
I wanted to leave the button clicked when you are choosing its menu item
help me please…!!