Navigation using href="#!/id"

Question

Recently I noticed some websites in which the menu navigation is somewhat like this.

    <div id="navigation">
      <ul id="nav">
        <li><a href="#" class="selected"> HOME </a></li>
        <li><a href="#!/about"> ABOUT </a></li>
        <li><a href="#!/projects"> PROJECTS </a></li>
        <li><a href="#!/contact"> CONTACT </a></li>
      </ul>
    </div>

I also noticed that this !/ comes inside "single page" sites with animation effects.Example(Please look at navigation in source code)
I tried to use it, but without animation it appears useless.
My question is,

• <a href="#about"> ABOUT </a> navigates to the section within the current page with id='about'. Then what does <a href="#!/about"> ABOUT </a> mean?
• Is that someway related to jQuery?Or it is specific to some jQuery plugin?
• If it is, then can I say that, it is not navigating to anywhere, but just a "hide out"(or fake address) for helping animation?(I'm asking like this because without animation, it appears useless).

Answer 1

The hashbang has nothing (directly) to do with the animation. It is there to provide a URL that you can link to when you use Ajax to change the content of the page. Google can then translate that URL into one that hits a URL on your site that will give indexable content to Google.

The technique has been obsoleted by the history api, which allows you to change the URL to a normal one on your site instead.

Using a normal URL means that progressive enhancement works, and you don't have the performance problems of loading the index page, displaying it to the user, then having JavaScript replace it a few seconds later.

---

If you want to do animation when you load the new content, then you can. It just doesn't have anything to do with the URL changing.