Simple JQuery Accordion menu

Post Date: May 12 2009
Total Visit: 17957

Simple JQuery Accordion menu is a best handy tool to show and hide information as needed. It also feel like a flash menu. I have used them on sites like Content Management System, Marketplace, E-commerce, and some of the Lowest/Highest Unique Bids Auction website. This accordion menu is worked perfectly while I used on these website. So, Now I decided to show how to create jQuery accordion menu which will help to your website too...

How to implement this jQuery accordion style menu:

Step 1: Include jQuery:
For a jQuery beginner the first thing you need to do is to include the jQuery library. This can be done by including the following code in the head of your page:

<script type="text/javascript" language="javascript" src="jquery.js"></script> Click here to download.

Step 2: Create the JavaScript:

Next step you need to create a blank JavaScript file. For the example, this file is called jquery-accordion.js. This file will contain the jQuery code required for the menu. Once you save the file include it in the head of your document with the proper path just after the jQuery library. An example of the JavaScript code to include in this document is shown below:

function initMenu()
{
     $('#menu ul').hide();
     $('#menu ul:first').show();
     $('#menu li a').click(function()
     {
          var checkElement = $(this).next();
          if((checkElement.is('ul')) && (checkElement.is(':visible')))
          {
               return false;
          }
          if((checkElement.is('ul')) && (!checkElement.is(':visible')))
          {
               $('#menu ul:visible').slideUp('normal');
               checkElement.slideDown('normal');
               return false;
          }
     });
}
$(document).ready(function() {initMenu();});


Step 3: Create the CSS:

Now we need to create a CSS file which will include  in the head of your page. For the example, this file is called style-accordion.css.This file will contain the CSS code for accordion menu:

#menu{font-family: Helvetica, Arial, sans-serif;  font-size: 0.9em;}
ul#menu, ul#menu ul {      list-style-type:none;  margin: 0;  padding: 0;  width: 15em;}
ul#menu a {  display: block;  text-decoration: none;    }
ul#menu li {  margin-top: 1px;}
ul#menu li a {  background: #006600;  color: #fff;      padding: 0.5em;}
ul#menu li a:hover {  background: #006600;}
ul#menu li ul li a {  background:#F7F7F7;  color: #000;  padding-top: 3px;  padding-bottom: 3px;  line-height: 14px;  background-image: url(arrow.gif);  background-repeat: no-repeat;  padding-left: 15px;   border-bottom:0px;}
ul#menu li ul li a:hover {  background: #BFBFBF;  border-left: 5px #006600 solid;  padding-left: 10px;}


Step 4: Create the HTML:

Now we need to create the HTML page to manipulate it. For the example, this page is called accordion.html. we will keep the page very, very simple. While page load there is dispaly first UL element menu by default. After that when you click on the any menu then jQuery functoin will check clickable element is visible , if yes then it will return false otherwise it will display clickable list menu and hide others.The full HTML document also displaying the includes is shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple JQuery Accordion menu</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<!--[if lt IE 8]>
<style type="text/css">
li a {display:inline-block;}
li a {display:block;}
</style>
<![endif]-->
</head>
<body>
<ul id="menu">
<li>
<a href="#">Programming Languages</a>
<ul>
<li><a href="http://www.php.net/">PHP</a></li>
<li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
<li><a href="http://www.python.org/">Python</a></li>
<li><a href="http://www.perl.org/">PERL</a></li>
<li><a href="http://java.sun.com/">Java</a></li>
<li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
</ul>
</li>
<li>
<a href="#">Content Management System</a>
<ul>
<li><a href="http://www.joomla.org/">Joomla</a></li>
<li><a href="http://www.drupal.org/">Drupal</a></li>
<li><a href="http://www.pligg.com/">Pligg</a></li>
<li><a href="http://modxcms.com/">Modxcms</a></li>
</ul>
</li>

<li><a href="http://www.sks.com.np/index.html">SKS's Home (no submenu)</a></li>
<li>
<a href="#">Web Development Services</a>
<ul>
<li><a href="http://www.sks.com.np/">Content Management System</a></li>
<li><a href="http://www.sks.com.np/">E-commerce Website</a></li>
<li><a href="http://www.sks.com.np/">Small Business Website</a></li>
<li><a href="http://www.sks.com.np/">Lowest Unique Bids Auction</a></li>
<li><a href="http://www.sks.com.np/">Highest Unique Bids Auction</a></li>
<li><a href="http://www.sks.com.np/">Penny/Live Bids Auction Script</a></li>
</ul>
</li>
<li>
<a href="#">Search Engines</a>
<ul>
<li><a href="http://search.yahoo.com/">Yahoo!</a></li>
<li><a href="http://www.google.com/">Google</a></li>
<li><a href="http://www.ask.com/">Ask.com</a></li>
<li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
</ul>
</li>
</ul>
</body>
</html>

DEMO | DOWNLOAD

Tags: ajax, jQuery, According Menu, jQuery Accordion Menu Bookmark and Share

To do articles more effectively, we need your comments or suggestions on how to improve the articles and make it more useful, or what other articles you would like in the future. Please CLICK HERE and leave your feedback. Thanks!!!