Facebook type vertical navigation menu created with jquery

The above picture shows a facebook page which gets loaded asynchronously with history support. This amazing technology of facebook is now been adopted by other websites also.

The whole thing contains only 2 pages conceptually.

1. The menu

2. The content space


  • 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).
  • Contents loads much faster as only the content is loaded instead of each page separately.
  • Further, it has a built in browser history support (Back button enabled).
  • Requested pages loads sequencially (e.g first content then advertisements).
  • An AJAX loading gif is shown while loading the page.
  • 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.
  • Allows users to perform multiple tasks (requests) at a time.
  • This plugin is developed using Benalman’s jQuery BBQ plugin.

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"/>

Add the following customized jQuery code just above the head section

 <script type="text/javascript">
/* //If used along with other jquery framework other than v1.4.1
//Uncomment this piece of code
setInterval("update2()", 1000); // Update every 10 seconds 

function update2()

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 id="centercolumn">
              <!-- single pane -->

  <div style="display: none;">


6 thoughts on “Facebook type vertical navigation menu created with jquery

  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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s