Home > Facebook, JQuery > Facebook type vertical navigation menu created with jquery

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

Features

  • 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()
{$(function()
{
});
}
*/
</script>

Put all your menu items inside a UL tag like bellow

<ul>
        <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>

</ul>

Here is the content area where the result will be displayed

<div id="centercolumn">
              <!-- single pane -->
<div>

  <div style="display: none;">

</div></div></div>
  1. March 30, 2012 at 10:57 PM

    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. April 16, 2012 at 7:35 AM

    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. April 25, 2012 at 2:27 AM

    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!

  1. May 23, 2012 at 5:47 PM
  2. May 23, 2012 at 5:50 PM
  3. June 21, 2012 at 2:48 PM

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 93 other followers

%d bloggers like this: