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

    This is very cool stuff and exactly what I’m looking for.
    How do I get this in a HTML Snippet using iWeb?

    What do I need and and what should be the complete HTML code.

    Best regards.

  2. Hey there, this plugin seems just like what I’m looking for. Except, I was wondering if there was any way to change it from mouse hover effect to a mouse click effect?

  3. First of all: Great work! Everything runs smoothly on first try.
    There’s one thing which I need though and before tampering with the source I’d rather ask if there is an easy solution. I would like to have a margin between the li-items so that the background shines through. This seems not possible because the width of the UL-element is dynamically calculated and doesn’t allow for custom styling inside this container.
    I suggest an additional parameter to correct the calculated width of the UL-element. that would make the script even more flexible.
    Just a thougt…
    Cheers, Stefan

  4. Hey, i’m totally new into the webdesign/development subject.

    i’m trying to figure out how to put all of this together, but i’m failing totally. I’m confused about how to put it all together in the index.php – How is the structure build of this in php? Could you show me?

  5. Hi,

    this is a great pluggin exactly what i’m looking for, I tried the vertical version but it didn’t work when I use only two image.. you have any idea?

    thanks

Leave a Reply

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