jQuery – Accordion Image Menu Plugin

Overview

Jquery Accordion Image Menu Plugin allows to create an accordion menu using the images as background. It’s allows multiple animations effects like: swing, circ, back, bounce, etc using the jQuery UI Effects.

How it Works

The plugin provides a method called AccordionImageMenu which is invoked on a container DIV or UL. Each child link of the container can be expanded/contracted with the mouseenter/mouseleave event. Options control the dimensions, title and effects.

How to Implement

1. Accordion Image Menu requires the jQuery JavaScript library and the jQuery UI (if you want to use an effect different form the default “swing”); so, you will need to include the jquery.js and jquery-ui.js files in the head element of your page, followed by the accordionImageMenu.js file. See the example below:

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/jquery-ui.js"></script>
<script type="text/javascript" src="path-to-file/accordionImageMenu.js"></script>

2. Include the Accordion Image Menu stylesheet file accordionImageMenu.css in your web page using:

<link rel="stylesheet" href="path-to-file/accordionImageMenu.css" type="text/css" />

3. Now you can call the AccordionImageMenu method, it’s recommended to include it when the DOM is fully loaded.

<script type="text/javascript">
$(document).ready(function() {
	$('#menu').AccordionImageMenu();
    });
</script>

Where “#menu” is the id of the container.

4. In the body of your page the HTML code for the menu should includes a DIV or UL with a links list:

<ul id='menu'>
   <li><a href='link1'><span>title 1</span><img src='image1.jpg' /></a></li>
   <li><a href='link2'><span>title 2</span><img src='image2.jpg/></a></li>
   <li><a href='link3'><span>title 3</span><img src='image3.jpg' /></a></li>
   <li><a href='link4'><span>title 4</span><img src='image4.jpg' /></a></li>
   <li><a href='link5'><span>title 5</span><img src='image5.jpg' /></a></li>
</ul>

or


   <a href='link1'><span>title 1</span><img src='image1.jpg' /></a>
   <a href='link2'><span>title 2</span><img src='image2.jpg/></a>
   <a href='link3'><span>title 3</span><img src='image3.jpg' /></a>
   <a href='link4'><span>title 4</span><img src='image4.jpg' /></a>
   <a href='link5'><span>title 5</span><img src='image5.jpg' /></a>

Options

'closeDim': 100, (items dimension when the menu is not activated)
'openDim': 200, (items dimension when mouseopen)
'width':200, (width of the menu if it's vertical)
'height':200, (height of the menu if it's horizontal)
'effect': 'swing', (animation effect based on:jQuery UI Effects)
'duration': 400, (transition timing)
'openItem': null, (item opened when the menu is not activated)
'border': 2, (items separation)
'color':'#000000', (separation color)
'position':'horizontal', (menu position vertical/horizontal)
'fadeInTitle': true (fade in or fade out the items title)

Examples

Simple

Code

$(document).ready(function() {
	$('#acc-menu1').AccordionImageMenu({
	  'openDim': 300,
	  'closeDim': 100,
	});
});

Using the ‘openItem’ option and ‘easeOutQuint’ effect

Code

$(document).ready(function() {
	$('#acc-menu2').AccordionImageMenu({
	  'border' : 1,
	  'openItem':0,
	  'duration': 400,
	  'openDim': 310,
	  'closeDim': 160,
	  'effect': 'easeOutQuint',
	  'fadeInTitle': false,
	  'height':100
	});
});

Position ‘vertical’ and ‘easeOutBack’ effect

Code

$(document).ready(function() {
	$('#acc-menu3').AccordionImageMenu({
	  'border' : 5,
	  'openItem':2,
	  'color': '#000000',
	  'duration': 350,
	  'position': 'vertical',
	  'openDim': 240,
	  'closeDim': 80,
	  'effect': 'easeOutBack',
	  'width':300
	});
});

Download


Accordion Image Menu | jQuery Plugin

Feedback

Share your comments and suggestions and support future improvement by clicking on the paypal donate button below.


69 thoughts on “jQuery – Accordion Image Menu Plugin”

  1. Hi,
    Is this possible to setup the transparent/opacity only for font in “title” to value 100%. I wont to setup background color to 0.2 (this I can do by “‘opacity’:0.2”) but this parameter change font opacity too.
    Thanks for help.

  2. Just what I was looking for. Is it possible to make the images expand from the left rather than the center, where the left side is in view and it expands to expose the right side?

Leave a Reply

Your email address will not be published. Required fields are marked *