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. Today people are making use of this convenient and easy mode for their daily
    activities whether it is to buy equipment, view a new recipe, pay their mobile
    or credit card bills, purchase movie tickets or get information about any subject, object or any company.
    You can easily find hundreds or even thousands of SEO companies online.
    The maximum amount of traffic among various search engines is shared by Google.

    Take a look at my homepage ?????????

  2. Good work! For Iphone / Ipad user or any touch tablet, can’t show images after hover on items. It direct them to link. any idea to fix this? thanks.

  3. Hi! is there any way to create multiple menus for a page?

    For eg, a main menu on the top of the page, and on click of any of the image link in that menu a second menu appears below it.. and on click on any of the links on that finally the required page is loaded…
    How could I do that?

  4. Hi,
    I use the vertical accordion for my website, as a menu. I wonder if I could adapt the width of my accordion at my window’s width ? to make it work on all screens (13″ to 24″).
    Thanks.

  5. Hi, could you tell me if it is possible to set a percentage width and height e.g. for opendim, closedim & height, if so how? Thank you very much

Leave a Reply

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