Simon Battersby

Partly as an exercise in writing a jQuery plugin, I’ve created a configurable jQuery dropdown menu. In the absence of javascript, the menu reverts to a standard css dropdown menu. It’s based on my original css dropdown menu here. My thinking was to allow the simple use of a few nice jQuery animations without compromising the experience for anyone without javascript.

View a demo here, which illustrates two menus with different options selected, plus another running on css only. Have a look at option 4.3 and option 4.3.1 to see the third and fourth level menus.

I’ve tested in FF3, IE8, IE7, IE6, Opera 9, Opera 10, Safari 4, Safari 5 and Chrome, on Win/XP, and FF15, Opera 12, IE7, IE and IE9 on Windows 7. If you’re (still) using IE6, then this will work for two level menus but no more…

Setup

This menu requires jQuery, so you need to load this and the plugin into in your head, plus the css file:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.orangemenu.js"></script>
<link rel="stylesheet" href="/css/orangemenu.css"/>

The plugin expects html in the form of a nested unordered list like this:

<ul class="orangemenu" id="mymenu">
<li><a href="#">Item 1</a>
     <ul>
     <li><a href="#">Item 1.1</a></li>
     </ul>
</li>
<li><a href="#">Item 2</a>
     <ul>
     <li><a href="#">Item 2.1</a></li>
     <li><a href="#">Item 2.2</a>
	 	<ul>
			 <li><a href="#">Item 2.2.1</a></li>
			 <li><a href="#">Item 2.2.2</a></li>
		</ul>
	 </li>
     </ul>
</li>
</ul>

Give the menu any id you want, but make sure it has the orangemenu class otherwise it won’t work. Right, now we’ve got the plugin, some css and some html we’re ready to go.

Configuration

To use the plugin with default settings all you need is this:

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

Animation effect options

• ‘fade’ – submenus fade in and out – this is the default effect
• ‘slide’ – submenus slide down and up
• ‘diagonal’ – submenus expand top left to bottom right
• ‘left’ – submenus slide across from left to right
• ‘slidefade’ – combines the ‘slide’ and ‘fade’ effects
• ‘diagonalfade’ – combines the ‘diagonal’ and ‘fade’ effects
• ‘show’ – submenus appear and disappear – this is identical to the default css behaviour but is included for completeness. It also works in IE6, unlike the basic css.

Animation duration options

• ‘slow’ – 600ms
• ‘fast’ – 200ms
• 1000 – 1000ms – or any numeric duration in milliseconds

Configuration examples

This sets an effect of ‘diagonal’ with 600ms duration.

$(document).ready(function(){
    $('#mymenu').orangemenu({duration: 'slow',effect: 'diagonal'});
});

This sets an effect of ‘slide’ with 1000ms duration.

$(document).ready(function(){
    $('#mymenu').orangemenu({duration: 1000,effect: 'slide'});
});

Configuring multiple menus on a page

You probably won’t want this, but the plugin supports multiple usage on a page with different options on each menu. You just need to ensure that each menu has a separate id:

$(document).ready(function(){
    $('#mymenu').orangemenu({duration: 'slow',effect: 'diagonal'});
    $('#mymenu2').orangemenu({duration: 'slow',effect: 'slide'});
});

Download

Orangemenu zip file (2kb)

Can I use this on my site?

Probably. See my policies on using code from this site.