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

Look here for the answer. http://stackoverflow.com/questions/4739667/why-does-twitter-use-a-hash-and-exclamation-mark-in-urls-and-how-do-they-rewrit — Jernej Novak, Dec 24 '13 at 19:13

score 3 · Accepted Answer · answered Dec 24 '13 at 19:14

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.

Navigation using href="#!/id"

1 Answers1