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

May 10th in Javascript & AJAX by Bedrich Rios
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!
PG

Author: Bedrich Rios

My name is Bedrich Rios and I design and develop web sites for a living. I love coding as much as I love designing. Feel free to contact me with job offers, compliments, or questions. I get way too many emails per day but I promise to get back to you as soon as I can.

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

Check out some more great tutorials and articles that you might like

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )
  1. PG

    Martin Rogalla May 10th

    Wow very nice! Thanks Nettuts!
    Keep the good work up!

    ( Reply )
  2. PG

    James May 10th

    Nice effect Bedrich!

    If you scramble the mouse around a lot the effect takes a while to catch up - it plays over and over again - maybe some kind of timeout/interval function would fix this.

    Thanks for the tut! :)

    ( Reply )
  3. PG

    Travis May 10th

    Very cool, Bedrich. I love the simple interactivity jQuery adds to navigation. Keep the tutorials like this comin’!

    ( Reply )
  4. PG

    Collis Ta'eed May 10th

    Yay the first tutorial not by me :-) Phew! Great job Bedrich!

    ( Reply )
  5. PG

    Bruce Alrighty May 10th

    Excellent tutorial Bedrich.

    ( Reply )
  6. PG

    Razvan May 10th

    Great tut, thanks!

    ( Reply )
    1. PG

      jb May 22nd

      hgvhv

      ( Reply )
  7. PG

    Danny May 10th

    Haha I like sliding over each tab a lotta times and then moving my cursor over and watching the tabs jiggle in and out :D

    ( Reply )
  8. PG

    Medium May 10th

    Very nice ! A solid tutorial :)

    ( Reply )
  9. PG

    Ben Griffiths May 10th

    Great tutorial, thanks! :)

    ( Reply )
  10. PG

    Johan May 10th

    Thanks! Please continue with these tutorials to great effects and functions using existing Javascript frameworks! With this code, you could construct a meny similar to the coloured menu on http://www.mootools.net, the one with “Download, docs, blog” etc. or ? :)

    ( Reply )
  11. PG

    giackop May 10th

    That’s cool thanx!! jQuery is so good

    ( Reply )
  12. PG

    N Avery May 10th

    I haven’t used jQuery, but I presume adding $(this).focus(… would do the same for focusing on the links. If I were to implement this, I’d want it to work for hovering and focusing.

    Nice tutorial :)

    ( Reply )
  13. PG

    Daniel May 10th

    very useful! thank you very much!

    ( Reply )
  14. PG

    Sumesh May 10th

    Nice tutorial, Bedrich.

    Collis, I don’t know if you have realized it, but in feed readers (I’m using FeedDemon), every link with an href=”folder/filename.extension” format, the feed item URl is prefixed. Of course, this maybe a problem of FeedDemon alone or all feed readers, but just saying ;)

    ( Reply )
  15. PG

    Adis Arifagic May 10th

    Hi,

    Great tutorial and effect like your style! ;)

    Keep up the good work.. :)

    ( Reply )
  16. PG

    Nate May 10th

    Very nice tutorial, thank you!

    ( Reply )
  17. PG

    Ali May 10th

    excellent tutorial, i like these type of effects tutorials. thanks for your help

    ( Reply )
  18. PG

    Designer May 10th

    very neat….. looks really cool

    ( Reply )
  19. PG

    Tiempo May 10th

    Reading book on jQuery and yours tutorials are great addition!
    Great! Thank you!

    ( Reply )
  20. PG

    Bedrich May 10th

    @james
    Nice catch. I hadn’t even noticed that myself, it kinda looks cool :). But you are right, some form of time out function may fix it.

    @all
    Thanks! This is my first attempt at a tutorial of this magnitude, so, it’s good to know you guys liked it.

    ( Reply )
  21. PG

    Lex Beelen May 10th

    Nice tutorial.

    Little bug in internet explorer and firefox on the mac. You get a scrollbar at the bottom. If you don’t want the scrollbar. Replace this code:

    #navigation-block {
    margin-top:200px;
    padding-left:190px;
    background:url(background.jpg) no-repeat;
    }

    And delete this rule.

    Demo:
    http://www.lexperts.nl/nettuts/demo.html

    ( Reply )
  22. PG

    Lex Beelen May 10th

    Sorry, forgot the rule:

    ( Reply )
  23. PG

    D. Carreira May 10th

    I’ll need use this in a future website! Thanks ;)

    David Carreira

    ( Reply )
  24. PG

    Lamin Barrow May 10th

    Thanks for the TUT Bedrich. :)

    ( Reply )
  25. PG

    Lamin Barrow May 10th

    Just a tip… you might want to add the following css code to prevent dynamic outlines from forming on an active link in Firefox.

    ul#sliding-navigation li.sliding-element a:active { outline: none; }

    ( Reply )
  26. PG

    Nico May 10th

    Thank you Bedrich - this has a very clean overall effect.

    @Lamin THANK YOU! I’ve been looking for the workaround the past THREE WEEKS! lol

    ( Reply )
  27. PG

    Nick May 10th

    Does anyone else get a nasty horizontal scroll on Safari 3.1.1 on OSX 10.5.2 ?

    ( Reply )
  28. PG

    Sean May 10th

    Very nice, thank you!

    ( Reply )
  29. PG

    Eric May 10th

    Thank you for the tutorial, just finished it. I took a second and tried it in IE6 and there is an odd issue with vertical padding when animating. Mootools seems to work on it though : P

    ( Reply )
  30. PG

    Rata May 10th

    Muchas gracias :)

    ( Reply )
  31. PG

    Tyler May 10th

    Nice tut. thanks for sharing

    ( Reply )
  32. PG

    Abozar May 11th

    Great! Thank you, Keep this nice work up!

    ( Reply )
  33. PG

    Jacob Gube May 11th

    Splendid tutorial, and I’ve recently switched from mootools over to jQuery, and like the author, I agree that the mootools site is beautiful… I also like the download section where you select the packages you want included and it compiles it for you on the fly.

    Couple of notes:
    - to save declaring arrays at the beginning of the function (and save some lines of code), I would just select the elements directly. Instead of $(list_elements).each, I would just use $("li.sliding-element").each

    - I think it’s good practice to reduce the number of CSS classes and ID’s as much as I can, and doing $(ul#sliding-menu li a) would select the appropriate list items without having to assign a class to the actual list item.

    Anyways, just my two cents - great tutorial and the detail and quality of writing was excellent! Keep up the awesome work!

    ( Reply )
  34. PG

    Paul @ web design Ireland May 11th

    I assume this has a smaller footprint than the mootools.js file etc? I always thought it was a very light framework.

    ( Reply )
  35. PG

    Boris Strahija May 11th

    Very nice, but…
    I think you have some markup that’s not needed. The right way would be:

    Navigation Title
    Link 1
    Link 2
    Link 3
    Link 4
    Link 5

    You can then reference the elements in JQuery like this:
    $(”#navigation-block”)
    $(”#navigation-block ul”)
    $(”#navigation-block li”)
    $(”#navigation-block li a”)

    ( Reply )
  36. PG

    Shane May 11th

    I’d not even seen the original effect, and it’s impressive - nothing too over the top. I find that some effects do little for usability and are more an annoyance than anything else.

    A great tutorial and showcase for the type of things that are so much easier to achieve with an empowering library such as jQuery. I’ve been using it for about a month now, and have never looked back.

    Go jQuery!

    ( Reply )
  37. PG

    Jacob May 11th

    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.

    ( Reply )
  38. PG

    Joefrey Mahusay May 11th

    Yay! this is the one i like. Thanks!

    ( Reply )
  39. PG

    Ehab May 12th

    Superb Tut ! Thank you so much :)

    ( Reply )
  40. PG

    Troyenne May 12th

    Thank you, this is an excellent tutorial !

    ( Reply )
  41. PG

    Drupal Museum May 12th

    Very cool effect. Thanks!

    ( Reply )
  42. PG

    Samaar May 12th

    Heey

    really really great tutorial. really love the clean and sleek look of the menu
    nice job Thank you!!!

    ( Reply )
  43. PG

    Tom May 12th

    Amazing final result, love it!
    Well done.

    ( Reply )
  44. PG

    Jack Keller May 12th

    Nice tutorial, I have always liked the “quiks” stuff from Mootools, it’s nice to see it done by an alternate library, I have been using Mootools for the past year but have started to play more with jQuery lately.

    ( Reply )
  45. PG

    benstewart May 12th

    Great tutorial. I will definitely be using this one!

    As Jacob was saying, there are a lot of unnecessary ids and classes in your xHTML, though. As long as you only have one ul in your div#navigation-block then you can reference everything in your CSS and JS relative to that element. This will not only make your markup look nicer, but it will also save some bandwidth and hand-coding time.

    For example, to reference one of your li’s you could get rid of those class assignments and just say:

    div#navigation-block li

    …instead of…

    li.sliding-element

    It doesn’t make the CSS any leaner, but all of the class assignments in the xHTML add up on a larger site. Plus, IMHO, it’s just good practice.

    ( Reply )
  46. PG

    max239947 May 12th

    The page unnecessarily scrolls horizontally in Firefox 3

    ( Reply )
  47. PG

    Qbrushes May 12th

    love the effect, well done!

    ( Reply )
  48. PG

    Aj May 13th

    great tutorial, thanks

    ( Reply )
  49. PG

    Rant May 13th

    Nice but why no active css example?

    ( Reply )
  50. PG

    CB-DESIGNS May 13th

    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

    ( Reply )
  51. PG

    Tyler Bramer May 13th

    Great way to add a simple effect. Thanks.

    ( Reply )
  52. PG

    mamjed May 13th

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

    ( Reply )
  53. PG

    Avinash May 14th

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

    ( Reply )
  54. PG

    nb May 14th

    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 ^_^

    ( Reply )
  55. PG

    daniel May 15th

    Muchas Gracias !!!

    ( Reply )
  56. PG

    Nick May 15th

    I love jquery!

    ( Reply )
  57. PG

    Jacob Gube May 15th

    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?

    ( Reply )
  58. PG

    Muhammad May 16th

    Anyone interested in doing a textpattern tutorial?

    ( Reply )
  59. PG

    Daniel Buchner May 22nd

    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. :)>

    ( Reply )
  60. PG

    lethrj May 23rd

    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.

    ( Reply )
  61. PG

    deep May 28th

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

    ( Reply )
  62. PG

    Justin May 29th

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

    ( Reply )
  63. PG

    Danny June 1st

    I just love using mootools… :)

    ( Reply )
  64. PG

    Evan June 2nd

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

    ( Reply )
  65. PG

    Creative451 June 5th

    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?

    ( Reply )
  66. PG

    Iuga July 2nd

    GRACIAS !!! Excelente creacion …

    ( Reply )
  67. PG

    Edward July 2nd

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

    one menu works the other doesnt?

    ( Reply )
  68. PG

    Khalid July 8th

    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 :)

    ( Reply )
  69. PG

    Jonathan Merriweather July 12th

    A fix for IE6:

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

    ( Reply )
  70. PG

    Lashan July 25th

    Very cool effect.

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

    ( Reply )
  71. PG

    turu August 30th

    so cool !

    ( Reply )
  72. PG

    elvisparsley September 2nd

    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.

    ( Reply )
  73. PG

    Windows Themes September 4th

    I like the effect, well done! Thanks

    ( Reply )
  74. PG

    Jersey September 16th

    high level, thanks for you contribution.

    ( Reply )
  75. PG

    Alojaweb September 16th

    excellent work, thanks i need this effect

    ( Reply )
  76. PG

    Jeff Livings September 20th

    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.

    ( Reply )
  77. PG

    Rodney September 25th

    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 ?

    ( Reply )
  78. PG

    Nilsko October 6th

    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.

    ( Reply )
  79. PG

    Rui Serra October 8th

    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

    ( Reply )
  80. PG

    MightyMike October 9th

    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

    ( Reply )
  81. PG

    Lelyn Tyson October 21st

    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.

    ( Reply )
  82. PG

    NetOperator Wibby October 22nd

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

    ( Reply )
  83. PG

    Samuel Lavoie November 8th

    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?

    ( Reply )
  84. PG

    seoweb November 10th

    jQuery is powerfull, excellent article.

    Thanks

    ( Reply )
  85. PG

    a2DAb November 18th

    thats mad, thanks heaps man, should look good anywhere

    ( Reply )
  86. PG

    Olivvv November 20th

    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

    ( Reply )
  87. PG

    ChanHan Hy November 24th

    It looks very nice.

    ( Reply )
  88. PG

    kareem November 27th

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

    ( Reply )
  89. PG

    Sanath Peiris December 4th

    great tutorial, thanks

    ( Reply )
  90. PG

    jules December 8th

    Hi great menu and great effects, im just having problems putting a sub menu within this menu !!
    Can anyone help ?
    Thanks

    ( Reply )
  91. PG

    riant December 28th

    Great effect ，Thanks

    ( Reply )
  92. PG

    Nagarjun January 16th

    Very cool stuff! Can I change the colors?

    ( Reply )
  93. PG

    Mark January 17th

    Very nice tutorial, but I personally don’t like it when you hover over the navs and it looks like a disco, so I just added .stop() in front of the .animate.

    the code:

    $(this).hover(
    function()
    {
    $(this).stop().animate({ paddingLeft: pad_out }, 150);
    },
    function()
    {
    $(this).stop().animate({ paddingLeft: pad_in }, 150);
    });

    Also, I’m still quite new to jquery, so if there’s something wrong about it, please tell me ;)

    ( Reply )
  94. PG

    Zedor January 18th

    Hi!
    I found a problem inserting the menu in a floating div (eg. floating left) when i put another floating div (eg. floating right) in the same block.
    You can see the script going slowly..

    Is there my fault?

    I modified your example to show you the problem.(only HTML modified)
    Here’s the code
    http://rafb.net/p/H8HAt628.html

    Thanks and sorry for the bad english XD

    ( Reply )
  95. PG

    big bad nosh January 20th

    as a complete numpty when it comes to coding i find resources such as yours to be manna from heaven. clean crisp precise and very clear and helpful.

    i shall be using this on my home pages once i get my arse in gear and start working on it

    ( Reply )
  96. PG

    James S January 28th

    Made this a jQuery plugin here: http://blog.sapara.com/menu-slide-a-jquery-plugin/

    Cheers

    ( Reply )
  97. PG

    Neozeratul January 29th

    Nice!!!

    ( Reply )
  98. PG

    Josh January 29th

    linear momentum ftl

    ( Reply )
  99. PG

    Lukáš Pikous February 1st

    Realy great job & idea :-) THX!!!

    ( Reply )
  100. PG

    khelloufi February 10th

    I’ve found something like this in that article:
    http://www.jcargoo.org/2009/02/7-vertical-menus-with-jquery-effects.html

    ( Reply )
  101. PG

    hompert February 19th

    It would be great to use it in Drupal. Unfortunately it isn’t that simple. Drupal developers are breaking their theeth on it.

    http://drupal.org/node/372252

    ( Reply )
  102. PG

    Hugo March 1st

    Hi there,

    Nice tut! But you might want to consider the prevention of the animation build-ups, you’ll notice them when hovering quickly up and down over the menu.
    Here’s a simple solution to that:
    http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

    Cheers

    ( Reply )
  103. PG

    dezinerrocky March 6th

    this is very nice tut.it should be to use for webdesigners

    ( Reply )
  104. PG

    GF March 20th

    Hi All, Can anyone tell me why in IE the effect pushes everything to the right of the menu when using tables.

    You don’t get this effect in FF, instead, the list item sits above anything to the right.

    ( Reply )
  105. PG

    India Jobs March 24th

    Hey nice job! Quite thoroughly explained tutorial. Thanks for it.

    ( Reply )
  106. PG

    Beth March 24th

    pure garbage…. I love flash :D

    ( Reply )
  107. PG

    rocky April 9th

    Very nice tut! Thanks!

    ( Reply )
  108. PG

    guy April 25th

    very nice. what modifications are necessary to make this work in a vertical environment? I have a client that wants a similar menu to slide up

    thx

    ( Reply )
  109. PG

    zerozaine April 28th

    thanks… you’re great

    ( Reply )
  110. PG

    CgBaran Tuts April 30th

    Very good tutorial thanks

    ( Reply )
  111. PG

    Anthony May 2nd

    To fix the margin problem with IE6 while hovering add margin-top instead of margin-bottom on the LI A element. Easy fix!

    ( Reply )
  112. PG

    adedip May 15th

    very very stylish! I’ll surely use it one day! ;)

    ( Reply )
  113. PG

    webtag May 23rd

    good

    ( Reply )
  114. PG

    webtag May 23rd

    THE WEBTAG is a Web development is broken down into two areas: front-end development and back-end development. Front-end developers are a mix of a designer and a back-end developer. They are responsible for turning designs into a web site, user interface and JavaScript widgets. Back-end developers generally have no artistic ability and have not seen the light of day since they first turned on a computer. They spend their spare time watching Star Trek and coding Nintendo DS emulators. Back-end developers are responsible for programming into existence all the functions of your web site that it’s users will experience but never see - XML parsers, elaborate product databases, eCommerce integrations

    ( Reply )
  115. PG

    The_Reveller May 24th

    Is there a fix for the floating container problem nted by Zedor on January 18th. My page is laid out in a floated container. The effect works but instead of sliding smoothly, it is jerky.

    ( Reply )
  116. PG

    flashfs May 24th

    Very cool. Nice background and images too.

    ( Reply )
  117. PG

    Larry June 8th

    VERY cool. I have implemented it in my web applications and it looks beautiful.

    Question - is there a way to make the entry fly-in go from bottom to top instead of from top to bottom? The lamborghini.com website does this from bottom to top and that is a nice variation.

    ( Reply )
  118. PG

    Noboyband June 9th

    thanks… you’re great

    ( Reply )
  119. PG

    Patrick June 17th

    You need to add .stop() before the animations so the animations doesn’t queue’s up.

    Other then that it looks awesome :)

    ( Reply )
  120. PG

    Paul June 23rd

    Is there anyway to produce the non-shaded side of the rectangle without edged corners. So one end has nice smooth rounded corners. Just wondering as would be a nice touch for my site.

    Anyway, great tutorial and well explained.
    cheers

    ( Reply )

Add Your Comment

( GET A GRAVATAR )
  1. Arrow
    Gravatar

    Your Name
    June 23rd