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

    1. Hello, You are making it easier for people to read blog. I will appreciate your work and will share it on my social profile, meanwhile, you can check my blogs too for:
      For Live Train Running website:- irctc news. Cheers.

  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

    1. Hey, You are doing a very good job with this, like I would like you to share some IPL live Streaming details. So, share IPL live streaming details in your next post. IPLlivestreaming.

  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.

  15. This comment has been removed by the author.

  16. Thanks for sharing. I hope it will be helpful for too many people that are searching for this topic.
    Packers and Movers Hyderabad
    Packers and Movers Pune
    Packers and Movers Mumbai

  17. Get a wide range of packing and moving companies at We endeavour to furnish the best packers and movers companies in Meerut at ease of Internet. Packers and Movers Meerut

  18. Packers And Movers Delhi prepared to help you in changing you from spot to put. Packing and moving affiliations work effectively and usefully to give their best ever administrations to customers and making them fulfilled in all conceivable way we could. These on-line firms give the clients a spouse in the middle of customers and helping so as to press and moving organizations them offering the run-down of all pressing and moving associations' classifieds. Along these lines lessens the customers pressure to look the proper packers and movers squander their parcels and heaps of time.

  19. bro i'm not able to download the code through box, can you send me at my mail address:

  20. Packers and Movers, Movers and Packers Gurgaon

    Movers and Packers Gurgaon offers most honest Movers and Packers in India. Comparison the quotes of Packers Movers in India and select most desirable

  21. Your website content is fabulous and awesome but I would like to say your website also good.
    Thanks for sharing... Keep it up..
    With the many years of experience in supporting people with this requirements and colossal assortment of packers and movers organizations Chennai, we require push to invest you with the better choices. In this way, how about we come us and get help with the best help.
    Packers And Movers Chennai

  22. Good Packers and Movers in Bangalore @
    Good Packers and Movers in Noida @
    Good Packers and Movers in Ghaziabad @
    Good Packers and Movers in Chennai @

  23. I am really aroused by this wonderful stuff. I always prefer to read the quality content and this thing I found in you post. Thanks for sharing.
    Web Designing Company Bangalore

  24. Thanks for all your information, Website is very nice and informative content.

  25. The most important and best tank cleaning companies Madinah

  26. No matter if some one searches for his required thing,
    therefore he/she desires to be available that in detail, so that thing is maintained over here. م

  27. It has the ability to work on all the various areas of cleaning Madinah so Neonol trust of our customers
    every high credibility even win the best cleaning company in Medina
    Cleaning apartments Medina cleaning Villas Madinah cleaning tanks Madinah ة ة ة ة ة


  29. Phen375 is a popular diet supplement drug in the US. It is manufactured in a FDA (Food and Drug Administration, US) authorized facility. Phen375 is an alternative to a popular prescription drug named Phentermine. Phen375 is so powerful that after taking only 2 diet pills you can literally see the pounds disappearing. For More Information Visit: