jQuery Vertical Accordion Menu Plugin

Getting Started

For the WordPress plugin version go to: Vertical Accordion Menu Widget plugin page

Overview

The plugin takes standard html nested lists and turns them into vertical accordion menus.

Some features include:

Ability to handle any number of levels
Select either “click” or “hover” event
State saving using cookies
Set sub-menus to auto-expand on page load based on CSS class
Allow all sub-menus to be expanded or auto-close open sub-menus
Disable parent links
Add count of number of child links

Uses the jquery cookie plugin by Klaus Hartl for saving the menu state and the hoverIntent plugin by Brian Cherne if the “hover” event is selected.

Also Check Out Our Premium jQuery Plugins:

Quick Start

1. Create a HTML Nested List

<ul id="accordion" class="menu">
	<li><a href="#">Home</a></li>
	<li><a href="#">Products</a>
		<ul>
			<li><a href="#">Mobile Phones &#038; Accessories</a>
				<ul>
					<li><a href="#">Product 1</a></li>
					<li><a href="#">Product 2</a></li>
					<li><a href="#">Product 3</a></li>
				</ul>
			</li>
			<li><a href="#">Desktop</a>
			    <ul>
					<li><a href="#">Product 4</a></li>
					<li><a href="#">Product 5</a></li>
					<li><a href="#">Product 6</a></li>
					<li><a href="#">Product 7</a></li>
					<li><a href="#">Product 8</a></li>
					<li><a href="#">Product 9</a></li>
				</ul>
			</li>
			<li><a href="#">Laptop</a>
			    <ul>
					<li><a href="#">Product 10</a></li>
					<li><a href="#">Product 11</a></li>
					<li><a href="#">Product 12</a></li>
					<li><a href="#">Product 13</a></li>
				</ul>
			</li>
			<li><a href="#">Accessories</a>
			    <ul>
					<li><a href="#">Product 14</a></li>
					<li><a href="#">Product 15</a></li>
				</ul>
			</li>
			<li><a href="#">Software</a>
			  <ul>
				<li><a href="#">Product 16</a></li>
					<li><a href="#">Product 17</a></li>
					<li><a href="#">Product 18</a></li>
					<li><a href="#">Product 19</a></li>
			  </ul>
			</li>
		</ul>
	</li>
	<li><a href="#">Sale</a>
		<ul>
			<li><a href="#">Special Offers</a>
	<ul>
		<li><a href="#">Offer 1</a></li>
		<li><a href="#">Offer 2</a></li>
		<li><a href="#">Offer 3</a></li>
	</ul>
	</li>
	<li><a href="#">Reduced Price</a>
	<ul>
		<li><a href="#">Offer 4</a></li>
		<li><a href="#">Offer 5</a></li>
		<li><a href="#">Offer 6</a></li>
		<li><a href="#">Offer 7</a></li>
	</ul>
</li>
	<li><a href="#">Clearance Items</a>
	<ul>
		<li><a href="#">Offer 9</a></li>

	</ul>
</li>
	<li class="menu-item-129"><a href="#">Ex-Stock</a>
	<ul>
		<li><a href="#">Offer 10</a></li>
		<li><a href="#">Offer 11</a></li>
		<li><a href="#">Offer 12</a></li>
		<li><a href="#">Offer 13</a></li>
	</ul>
</li>
</ul>
</li>
<li><a href="#">About Us</a>
<ul>
	<li><a href="#">About Page 1</a></li>
	<li><a href="#">About Page 2</a></li>

</ul>
</li>
<li><a href="#">Services</a>
<ul>
	<li><a href="#">Service 1</a>
	<ul>
		<li><a href="#">Service Detail A</a></li>
		<li><a href="#">Service Detail B</a></li>
	</ul>
</li>
<li><a href="#">Service 2</a>
	<ul>
		<li><a href="#">Service Detail C</a></li>
	</ul>
</li>
	<li><a href="#">Service 3</a>
	<ul>
		<li><a href="#">Service Detail D</a></li>
		<li><a href="#">Service Detail E</a></li>
		<li><a href="#">Service Detail F</a></li>
	</ul>
</li>
	<li><a href="#">Service 4</a></li>
</ul>
</li>
<li><a href="#">Contact us</a></li>
</ul>

2. Include The jQuery Vertical Accordion Menu Plugin

Add the jQuery plugin to the head of your document – also add the cookie plugin and hoverIntent plugin if required:

<script type='text/javascript' src='js/jquery.cookie.js'></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcjqaccordion.2.7.min.js'></script>

3. Vertical Accordion CSS

The plugin doesn’t require any essential CSS styling in order to create the vertical accordion effect and will create the menu from any standard list. One benefit of this is that in the event that the users browser does not have javascript enabled the menu will still be available.

See the jQuery vertical accordion menu examples page for samples skins.

4. Initialise The Vertical Accordion Menu

The menu can be quickly and easily initialised using the default options by adding the following code to the head of your document:

jQuery(document).ready(function($) {
    jQuery('#accordion').dcAccordion();
});

For more information on changing the menu settings refer to the Options page.

Design Chemical