Animated content navigation effect using jquery

I always get bored with the same stuffs. And, I see same kind of content navigation to the different websites. Click a link, let’s the whole web page gets loaded and new page gets displayed. It would be better to show another content in the same page with few animation without loading the whole page.

In this post, I’ll show you how to make various animation to the content using jQuery. First of let’s start looking at the HTML and CSS code,

HTML Code for animated content navigation

<a href="#home" class="linkclass" >Home</a>
<a href="#about_us" class="linkclass" >About Us</a>
<a href="#service" class="linkclass" >Services</a>
<a href="#contact_us" class="linkclass" >Contact Us</a>

<div class="container">
    <div id="home" class="msg_body"> content goes here </div>
    <div id="about_us" class="msg_body"> content goes here </div>
    <div id="service" class="msg_body"> content goes here </div>
    <div id="contact_us" class="msg_body">  content goes here </div>

As you can see above, the “href” attribute of the anchor tag is pointing to the id of the “div”. “Home” anchor tag is pointing to “#home”. In jquery, id of a element is represented by adding “#” prefix to the id of that element.

CSS code for animated content navigation

  border:1px solid #CCCCCC;
  padding: 5px;
  width: 300px;

Above CSS code is pretty straight forward and you can change it according to your need. Note that, there is position attribute to “absolute” in the “msg_body” class. Now let’s look at various the javaScript code in jQuery to make the various animated content navigation

Faded content navigation

View Live Demo

 //hide the all div except first one
//when the anchor is clicked content gets faded

In the first line of javaScript code, all the element with class “msg_body” is made hidden except the first element with same class. And when the anchor with class “linkclass” is clicked, the element with class “msg_body” gets faded out which is being displayed in browser. And, the element with the id value in the “href” attribute of the clicked anchor tag, get displayed in browser with fading effect.

Shutter like content navigation effect

View Live Demo

//hide the all div except first one
//when the anchor is clicked content gets faded

The code is same as the above code but here “hide()” and “show()” function of jQuery is used to hide and display the content in different manner.

Sliding Content Navigation Effect

View Live Demo

 //hide the all div except first one
//when the anchor is clicked content gets faded

This is another content navigation effect with sliding manner. “slideUp()” and “slideDown()” functions of jQuery is used to display this kind of effect.

Download full source code

26 thoughts on “Animated content navigation effect using jquery

  1. very interesting post you have here you must be a very good web programmer ^_^

  2. Thanks for such a great compliment….I’m also another learner….

  3. hem

    Very Interesting scripts magic

  4. do you know how can chance the href value?

  5. yes I know…let’s suppose “anchor” is the id of the anchor tag then you can change the href value by using


    will change the href value to

  6. Ian

    Your demos might be improved if you used different chunks of lorem ipsum text between each page. As it is right now, it’s hard to fully appreciate the transition if it is the same text on each page.

    Good work!

  7. Oh right Ian…thanks for the comment….I’ll try to consider these things in the forthcoming posts..

  8. Al


    I didn’t put the so you were not able to see the code.

    Here it goes again:

    Menu in index.php:

    Content #1
    Content #2

    Content is displaied in content.php.

    In other words, I would like to have a menu in Page 1 (index.php) which links to content on Page 2 (content.php). However, I tried the code just above and it did not work.

    Is there a way to make it happen, or this content navigation is only for same-page linking.



  9. Al


    I am trying to put the code here, but it is not working. Even using . If you wish to delete the first post, that’s fine. Don’t want to pollute the comments.


  10. @Al- ya man this code doesn’t work for the different pages…

  11. john

    Oh, excellent! Thanks Roshan, this is exactly what I’ve been looking for.
    I created a portfolio site for a friend, and we would love to have it load QUICKLY between images (hello, javascript), but at the same time keep unique URLs for every image for links from blogs (hello, loading…)
    I first saw the # used to show different content on the same page (without scrolling) on Mobile Me’s Gallery page, and realized this was the solution.
    Thanks for sharing!

  12. redhawk

    How do set a different class to a selected item?

  13. mario

    very nice script here really…

    just one question….
    when the content of tab is longer then the height of a window then the script do a “jump”
    is this possible to avoid somehow? i think the problem is there because of a premalinks..

  14. mario

    hello again! :-)
    those was not prema but permalinks .-)
    what i wanted it to post a link where this guy (jordan boesch) kindly explains by example…

    look at the difference between example no1. and no2. (notice how whole windows ‘jumps’ up when you 4 example scroll a little bit downwards and click any tab on example no2.)

    i notice this to be very common stuff among jquery plugins…its a little bit inconvenient when you wish to use some of them on your web site…

    nevertheless thx for the really nice plugins! :-)

  15. I would like to know if this code can be used for diff pages. ie i need to call this script from other pages. Is there any way?

    In between great scripts man…

    you rock…

  16. José

    It is a great script, thanks a lot.
    There is one problem: it do not work with latest jquery, version: jquery-1.3.1
    Any Idea?
    Best regards

  17. zeeshan

    Hi , Its very good example looking nice on site.
    keep going Roshan…

    Really Rocking

  18. Hey Roshan, great work. Just wondering if you knew how to adjust the script to use the bottom edge as the anchor, rather than the top (so that the elements resize up rather than down).

    Great component, thanks.

  19. To be fair this script needs a major update, didnt look at your code much tbh since this isnt exactly difficult to pull of but there is one major bug i noticed in your demo. On fast connections the ajax runs so fast that the animation is reduced to a mere flicker at the bottom of the sliding box – which in turn makes it very annoying for navigation to be honest.

    Sorry if it sounds harsh, just thought you should know.


  20. Very interesting article. But it is also important for your link building to look natural and not an attempt to deceive search engine spiders in search of links. Another way is trying and looking for sites within your industry rather than general, unrelated sites to get links from. So far has been working fine for our business.

  21. alex

    Hello Roshan,

    Thnx for sharing. Now, I tried to modified this a bit and make it somehow dynamic (I also get bored with static content 😉 ). So, I built the structure of the divs and links with PHP out of a dbase. My problem is that if you click any element, it will fade out the first one but I cannot make it fade in the selected one…
    Any suggestions?


  22. Very interesting article. Thanks alot . Gives a great looks and nice effect on the site. Hope to see newer post.

  23. Michael

    I found a great page that give numerous downloadable examples of how to change the text inside an anchor using jQuery. They are really helpful for web 2.0 and web 3.0 sites.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>