Thursday, 29 March 2012

Facebook type ajax navigation menu created with jquery


Do you want to add the same feature as facebook's page navigation to your website. Facebook loads only a part of a page asynchronously using AJAX. Although it is loaded using ajax, the back button of the page is still enabled. With help of the jquery plugin named BBQ we are going to create one such navigation menu.

Ajax navigation menu

Lets get started with the Tutorial
Add the following scripts to your page template
<script type="text/javascript" src="js/jquery-1.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/facebook_vertical_menu.js"></script>

Add the following CSS to your page template
<link href="css/fb_menu.css" rel="stylesheet" type="text/css"/>

Put all your menu items inside a <ul> tag like bellow
 <li><a href="#wall.htm"><img src="images/blogs.png" height="14"/>Wall</a></li>        
 <li><a href="#Information.htm" href="#"><img src="images/info.png" height="14"/>Info</a></li>        
 <li><a href="#Friends.htm"><img src="images/friends.png" height="14"/>Friends</a></li>      
 <li><a href="#Groups.htm"><img height="14" src="images/groups.png"/>Groups</a></li>
 <li><a href="#Photos.htm"><img src="images/photos.png" height="14"/>Photos</a></li>
 <li><a href="#Messages.htm"><img src="images/messages2.png" height="14"/>Messages</a></li>

Here is the content area where the result will be displayed
<div class="bbq-content">
  <div style="display: none;" class="bbq-item"></div>

  • Allows users to perform multiple tasks (requests) at a time.
  • Contents loads much faster as only the content is loaded instead of each page separately.
  • An AJAX loading gif is shown while loading the page.
  • This plugin is cache enabled. It helps the page loading faster with the use of cacheing technology which restricts the number of unnecessary database server requests.
  • Contents loads using AJAX but still back button is enabled. Hence visible to search engines (SEO optimized).
  • Further, it has a built in browser history support (Back button enabled).
  • Requested pages loads sequencially (e.g first content then advertisements).
  • Individual pages to fill in the content space.
  • Nicely positioned css layout like facebook vertical menu.
  • Also includes images to make the menu user friendly.
  • Clean and simple code design to make your embeding task easy.


  1. This amazing technology of facebook is now been adopted by other websites also.Great post. I was checking constantly this blog and I am impressed! Extremely helpful information specially the last part I care for such information much. I was seeking this certain information for a long time. Thanks and good luck.

  2. Hi, i believe that i saw you visited my site thus i got here to “return the want”.I'm attempting to to find issues to enhance my site!I guess its adequate to use a few of your ideas!!

  3. Very good website you have here but I was curious about if you knew of any message boards that cover the same topics talked about here? I'd really love to be a part of online community where I can get advice from other knowledgeable individuals that share the same interest. If you have any recommendations, please let me know. Kudos!

  4. [...] 1. Facebook type vertical navigation menu created with jquery [...]

  5. For most up-to-date news you have to visit world-wide-web and on the web I found this web page as a finest web page for most up-to-date updates.
    Review my web blog : Oyunu

  6. HOw can i put content on the default page?

  7. same question here please, HOw can i put content on the default page? love your script but cant figure out hot to use with my existing content

  8. Hey Ipsita, very nice info. Keep it up.
    There may be another method to achieve this, which I have discovered by using JavaScript and Google Drive. It is also super-fast method of data access using JSON.
    Facebook Ajax style page loading

  9. Hi, I am using the latest version of wordpress/Buddypress. How would you get your profile picture to show in the menu, And link it to your profile? Iv'e been trying all day without any luck..


  10. Hi, amazing code, but i don't have any idea about php, can you give me the java code, instead of php. or how can i convert php code to java code..

  11. --------------

  12. Thanks for more information best company for Packers and Movers India provide moving services.
    Packers and Movers in Navi Mumbai
    Packers and Movers in Thane
    Packers and Movers Navi Mumbai
    Packers and Movers Thane


  13. @packers and movers in pune @packers and movers in delhi @packers and movers in mumbai @packers and movers in delhi @packers and movers in bangalore @packers and movers in chennai

  14. This moving organization dependably conveys great moving administrations to the buyers. The moving firm manages entire moving administrations with residential moving and business migration. There are abundant of migration services offerings, for example, office moving, family unit moving, mechanical moving, corporate administrations, load moving, cargo moving, package conveyance, and many more accessible possibilities. The specialists of moving organization perform all errands from packing to unloading, stacking to emptying and in addition take extremely legitimate consideration of your products and convey opportune at your new destination.