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. The following questions, and the answers to them from each prospective company you interview, should be able to clarify which company will be the best to
    suit your needs, drive targeted traffic to your site, and improve the conversion rates from your site’s visitors.
    Any bad step can result in adverse effects on your business and sales can fall immediately.
    There are a number of reasons that contribute to making edu link special and extremely relevant even in today’s times.

    Feel free to surf to my weblog – seo australia globus australia and new zealand tours

Leave a Reply

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