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 Guys … coming back to flicker problem … plugin does magic for me apart from that anoying right hand side slight movements of whole DIV … I tried to switch to latest jquery and jquery-UI libraries but no luck … I also tried to change menu from DIV to UL LI and also nothing … please help me as I can’t afford to have it with this badly looking flicker

    Many thanks,
    ZoltAi

  2. Like the plug-in. I am having trouble using this on Drupal, as Drupal uses an older version of jquery. What is the required jqueryui version and jquery versions that need to be used for this to work?

  3. Hi, I love the script! On firefox it works great but I have IE8.0 issue. Images go crazy when I’m moving mouse over menu. If I delete everything works fine. I need doctype html for other script. Im working on unmodified files (Version 0.4)from Download section. Any ideas how to fix it? 🙂

  4. Absolutely excellent.
    Just one question. I’m using this on several pages each with a different openItem. php is dynamically loading the correct openItem arg for each page no problem. However depending on where exactly in the menu item you clicked the initially opened item is not necessarily the new page item. The plugin has already worked it magic based on the mouse location. Usually the first position. I’m sorry if this sounds like gibberish its difficult to explain.
    Best
    Luke

  5. Hi,

    If there a way of stopping the flicker you get on the right hand side of the .aim div? Whenever you scroll over one of the images there is a flicker and the div moves in very slightly. Very annoying!

    Thanks

    1. I am also looking for an answer to this flicker problem. It doesn’t look very nice. I’m sure it’s an easy fix, but I can’t figure it out to save my life! Anyone have an answer?

      Thank you!

        1. Hi,

          Could you please tell me exactly what jquery and jquery UI files you included to keep it from “moving ever so slightly” ? I am currently using the following, and it still moves a little bit.

          1. jquery-ui-1.8.13.custom/js/jquery-1.5.1.min.js

            jquery-ui-1.8.13.custom/js/jquery-ui-1.8.13.custom.min.js

            accordionImageMenu-0.4.min.js

    2. Same Problem here. Testet with jquery 1.6.2, jquery-ui-1.8.16 your 0.4 and in Firefox 6.0.2 and Chrome 14.08.
      IE 8.076 works fine! =)

  6. Hi,

    Love the menu- but experiencing a problem. Using v.3.1.1, horizontal layout and all works as far as implementation. The problem: no matter what image size is attached to several pages(3 of 7), images won’t load for the menu items. The first 4 are fine (left to right), but the last three are vacant. Actually, the last one shows an image from somewhere- not the page and not in the html of the page.

    Any clues? i’ve disabled all plugins except for another slideshow as well as jf3 maintenance;

    No js errors reported.

    Thank you kindly for your help!

    1. Hello,

      OK- I found a strange issue and workaround, in case someone else experiences this…? When an existing image from the Media Gallery was inserted AFTER setting up this plugin ( meaning: any page that didn’t have an image already in place), the image wouldn’t show up.

      The workaround: upload a NEW image to the page (we used the WP3 menu vs. page or post selection in the settings) from your computer INSTEAD of using a gallery pic.

      I’m not sure where the problem exists yet, but the workaround inserted the correct images into the menu instead of “blank” spaces.

      Thanks- the menu is great!

  7. I really like this a lot I am trying to use this for a friends site and it looks really good. He was wondering though is there a way to keep the div that you moused over to stay open other than having the mouse over it?

Leave a Reply

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