Animated content navigation effect using jquery

Advertisement

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>
</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

.container
{
   width:312px;
   margin-top:20px;
}
.msg_body
{
  border:1px solid #CCCCCC;
  padding: 5px;
  width: 300px;
  background-color:#F4F4F8;
  text-align:justify;
  position:absolute;
}
.linkclass
{
  font-weight:bold;
  color:#006699;
}

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
$('.msg_body:not(:first)').hide();
//when the anchor is clicked content gets faded
$("a.linkclass").click(function()
{
  $('.msg_body').fadeOut("slow");
  $($(this).attr("href")).fadeIn("slow");
});

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
$('.msg_body:not(:first)').hide();
//when the anchor is clicked content gets faded
$("a.linkclass").click(function()
{
   $('.msg_body').hide("fast");
   $($(this).attr("href")).show("slow");
});

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
 $('.msg_body:not(:first)').hide();
//when the anchor is clicked content gets faded
$("a.linkclass").click(function()
{
   $('.msg_body').slideUp("slow");
   $($(this).attr("href")).slideDown("slow"););
});

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

Popularity: 8% [?]

Enter your email address and get free tutorials, tips and tricks of PHP, Ajax, JavaScript and CSS directly delivered to you email inbox:

Related Posts

» Block Shuffling effect using jquery
» Help me to become the first Blogging Idol
» Flashing Alert Message Box using JQuery
» Blink and bounce effect on image or object using jquery

26 Comments on “Animated content navigation effect using jquery”

  • Ice 9 web wrote on 8 May, 2008, 13:19

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

  • Roshan wrote on 8 May, 2008, 15:17

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

  • hem wrote on 8 May, 2008, 16:31

    Very Interesting scripts magic

  • website design wrote on 9 May, 2008, 13:49

    do you know how can chance the href value?

  • Roshan wrote on 9 May, 2008, 15:40

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

    $(“#anchor”).attr(“href”,”http://roshanbh.com.np”);

    will change the href value to http://roshanbh.com.np

  • Ian wrote on 9 May, 2008, 17:58

    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!

  • Roshan wrote on 9 May, 2008, 18:29

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

  • Al wrote on 11 July, 2008, 17:14

    Roshan,

    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.

    Thanks,

    Al

  • Al wrote on 11 July, 2008, 17:17

    Sorry,

    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.

    Al

  • Roshan wrote on 12 July, 2008, 7:06

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

  • john wrote on 10 November, 2008, 4:50

    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!
    John

  • redhawk wrote on 7 December, 2008, 8:40

    Cool.
    How do set a different class to a selected item?

  • mario wrote on 27 December, 2008, 23:23

    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..
    thx!

  • mario wrote on 28 December, 2008, 22:26

    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…
    link: http://boedesign.com/demos/wiggleslide/

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

  • Niju wrote on 21 January, 2009, 10:51

    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…

  • José wrote on 19 April, 2009, 16:52

    Hello,
    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
    José

  • zeeshan wrote on 27 April, 2009, 5:29

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

    Really Rocking

  • michaelmesh wrote on 14 July, 2009, 21:05

    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.
    michaelmesh

  • Ryan wrote on 4 October, 2009, 12:40

    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.

    Ryan

  • Michael wrote on 7 November, 2009, 11:44

    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.

  • alex wrote on 6 January, 2010, 12:40

    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?

    Cheers!

  • Sudeep Shrestha wrote on 2 February, 2010, 3:44

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

  • Michael wrote on 12 February, 2011, 22:03

    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.

    http://www.ajaxera.com/jquery-change-text-in-anchor/

Trackbacks

  1. Block Shuffle effect using jquery
  2. Block Shuffling effect using jquery
  3. pligg.com

Write a Comment

 


Copyright © 2014 Roshan Bhattarai's Blog. All rights reserved.
Powered by WordPress.org, Custom Theme and ComFi.com Calling Card Company.