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.