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:

    Learn about pure garcinia cambogia extract, doctor oz and the infamous sample bottle offers all in one place. Our review will help you make a clear choice!

  31. Need a professional packers and movers pune to shift carefully your most precious assets, your household? Visit Here- Movers And Packers

  32. This comment has been removed by the author.

  33. The best packers and movers in Delhi, Movesure many surveys are undertaken that hope to fulfill the needs of the customer and pay for him the best reachable facilities that are technically futuristic and adherent.

    packers and movers in Connaught Place
    Movers and packers in Connaught Place
    home shifting Connaught Place

  34. Looking for proven, effective Dianabol for Sale without side effects? Discover premium Dbal-Max Pills currently helping guys build mass safely.

  35. عزيزى العميل اهلا ومرحبا بك فى موقع مؤسسة الحرمــين للمقاولات العامة بالدمام و الرياض
    Site pioneering in the world of domestic services and the first, Saudi Arabia because of its excellent services, Valbergm we founder profitable but practicing all Nchattna linked closely to meet the demands and needs of our customers and to achieve that goal offer you all comprehensive services in strict compliance with the highest professional standards sophisticated

    شركة كشف تسربات المياه بالاحساء

    الموقع الرائد فى عالم الخدمات المنزليه والاول بالمملكه العربيه السعوديه لما يتمتع به من خدمات مميزه ، فالبرغم من اننا مؤسسه ربحيه الا ان مزاولة نشاطتنا كلها مرتبط على نحو وثيق بتلبية طلبات وحاجات عملائنا ولتحقيق ذلك الهدف نقدم لك كافة الخدمات الشامله بالالتزام الصارم وبأرقى المعايير المهنيه المتطوره
    فلدينا خبره طويله فى مجال التنظيف ومكافحة الحشرات والكشف عن التسربات وتسليك المجارى وعزل الاسطح ونقل الاثاث وتخزينه بكفاءة منقطعة النظير ، لا تتردد واتصل بموقع مؤسسة الحرمــين فخدماتنا ليس لها بديل واسعارنا ليس لها مثيل ،ولدينا فريق عمل يتصل مع العملاء على جسور الثقه والصدق والامانه فى العمل ، وهدفنا هو ارضاؤك وراحتك ، لا تقلق ونحن معك .. لا تجهد نفسك ونحن تحت امرك ورهن اشارتك .
    أبرز خدمات مؤسسة الحرمــين للمقاولات العامة بالدمام والرياض

    شركة عزل اسطح بالاحساء

  36. Relocate your household, office and transport your vehicle with Dealkare packers and Movers.
    Packers and movers in vasundhara

  37. Packers and Movers in Kurukshetra Movers and packers in Kurukshetra

  38. will you be my valentine pictures for gf So if you love someone and want to make her/him your Valentine. So this happy valentines day 2017 is the best chance for you. There are thousand of people who purpose

  39. قم الآن بالتواصل مع فروعنا لمراكز صيانة فريش المعتمدة في مصر حتى تتمكن من الحصول على اقوى خدمات الصيانة التي تحتاجها مثل خدمات صيانة يونيفرسال المتكاملة لاصلاح كافة اعطال الاجهزة الكهربائية .

  40. Well and informative content provided about IPCC Nov 2015 taxation question paper with solutions. Thanks for provide this information here about this blog.
    3bhk Flats in Panchsheel Park

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

  42. The most unique way to celebrate Friendship Day would be hold a gathering for your favorate images,quotes,
    hd wallpapers,messages,pics,photos and many more... Be that as it may, this thought needs a touch of arranging and exertion as you have to choose where to post(facebook,whatssapp,twitter,instagrame etc..) Once that is done, ring your pals and simply have your indulgence !

    happy friendship day images

    happy friendship day 2017

    friendship day quotes

    happy friendship day quotes

    friendship images with quotes

    friendship day messages

    friendship day wishes

    happy friendship day message

    friendship day status

  43. Quickbooks payroll Customer Service Number, Intuit Quickbooks payroll Customer Support Phone Number, Intuit Quickbooks payroll Customer Support Number, Intuit Quickbooks payroll Customer Service Helpline Number, Intuit Quickbooks payroll Customer Care Number, Intuit Quickbooks payroll support team phone number, Intuit Quickbooks payroll help number-Intuit Quickbooks payroll Helpline Number; Intuit Quickbooks payroll help phone number, Intuit Quickbooks payroll Helpline Number, Intuit Quickbooks payroll technical support Toll free Number, Intuit Quickbooks payroll Support Telephone Number, Intuit Quickbooks payroll technical support Telephone number, Intuit Quickbooks payroll technical support contact number, Intuit Quickbooks payroll support contact number, Intuit Quickbooks payroll technical support contact number, Intuit Quickbooks payroll support phone numberQuickBooks Payroll Support QuickBooks Payroll Phone Number QuickBooks Payroll Support Phone Number QuickBooks 2017 Payroll Support Phone Number QuickBooks Payroll Tech Support Phone Number
    QuickBooks Payroll Support
    QuickBooks Payroll Phone Number
    QuickBooks Payroll Support Phone Number
    QuickBooks 2017 Payroll Support Phone Number
    QuickBooks Payroll Tech Support Phone Number


  45. in order to download shareit apk file you could check this post

  46. Use this article to increase your knowledge . cara menggugurkan kandungan

  47. Search of movers packers in your city has become very simple now!
    Best Movers Packers Chennai

  48. I am a attractive female for pleasurable and delight service in only on Hyderabad escorts service. Hyderabad escorts Models

  49. Call our QuickBooks Support Phone Number at 1-800-272-4167 and get QuickBooks Technical Assistance instantly. Your call will be quickly transferred to a customer support representative. Our average response time is 10 seconds.

  50. make us call to get escorts in mumbai at very affordable prices.

  51. I hope for you to be always guided to the right way to the truth and then live in peace always.


    عندك اثاث مستعمل تريد بيعة عندك اثاثك قديم وتريد تجديد اثاث البيت محتار وتبغى
    شركة شراء اثاث مستعمل بالمدينه المنوره

    شركة شراء اثاث مستعمل متخصصة فى شراء الاثاث المستعمل بالمدينة المنورة
    كل ماعليك هو الاتصال بنا افضل شركة لشراء الاثاث المستعمل بالمدينة المنورة بافضل الاسعار اتصل بنا يصلك مندوبنا ليرى الاثاث ويقوم بخبرتة بتقييم الاثاث المستعمل
    لديك ويعطى كل قطعة قيمتها ويعطيك افضل سعر بالسوق وبذلك تكون قد اتممت الصفقة باتصال واحد وتاتى العمال والسيارات لنقل الاثاث المستعمل لديك
    واعطائك افضل الاسعار فى اثاثك المستخدم لماذ التقوى

    شراء الاثاث المستعمل باالمدينة المنورة

    لشراء الاثاث المستعمل بالمدينة المنورة افضل شركة شراء اثاث مستعمل بالمدينة المنورة لانها اولى الشركات العاملة فى
    مجال شراء الاثاث المستعمل بالمدينة المنورة

    شراء الاثاث المستعمل المدينة المنورة

    شراء الاثاث المستعمل باالمدينة المنورة

    شراء الاثاث المستعمل بالمدينة المنورة

    شراء الاثاث المستعمل بالمدينة المنورة

    حراج المدينة المنورة

  53. بمناسبة اقتراب حلول السنة الجديدة 2018 نقدم لكم لعبة تعتبر من اروع العاب بنات جميلة وجديدة لانها صدرت هذه السنة وهي تشتغل في الموبايل و الكمبيوتر معا لانها جديدة جدا وسهلة جدا في اللعب فالتحكم فيها بالماوس فقط وبها بنتين جميلتين ستايل جدا سيتنافسن حول من هي الاجمل ويجب على كل واحدة ان تظهر اجمل من الاخرى وانتم ستختارون لهم كل شيء من اقمصة او فساتين من اختياركم و سراويل عصرية و ايضا هناك اكسسوارات جميلة فل تتفضلوا بالاستمتاع بها ومستقبلا سنقدم لكم العاب بنات 2018 رائعة ومميزة سنقدمها لكم من طرفنا نحنا طاقم العاب بنات 01 وسنسهر على طرح باقة مميزة تنال اعجابكم كي تستمتعوا بها وتشاركونها مع اصدقائكم المقربين .
    العاب بنات جديدة

  54. vtustudentsi thanks for this article and you should check the following things

  55. Packers and Movers in Delhi @

  56. car transportation in Delhi @
    car transportation in Gurgaon @
    car transportation in Pune @
    car transportation in Bangalore @
    car transportation in Chennai @
    car transportation in Mumbai @
    car transportation in Hyderabad @
    car transportation in Ahmedabad @
    car transportation in Kolkata @

  57. I read this article. I think You put a lot of effort to create this article. I appreciate your work.
    Dissertation Writing Services

  58. Nice job making this informative blog. Here is website link for Fathers Day Quotes And Sayings