Need some help?

I'm usually available for small jobs or problem solving with jQuery or css, at reasonable rates. Just get in touch.

Web Hosting

We recommend Clook for web hosting. UK based, great service and great value.

jQuery dropdown menu plugin with css fallback

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.

15 responses to “jQuery dropdown menu plugin with css fallback”

  1. Mark says:

    Hi Simon,

    Your nav is awesome, i really like that you can incorporate different effects.

    I do have a question concerning your menu drop down over jquery slides though, it seems to hide behind slides even when i set the z-index to 9999.

    Any advice?

    Thanks,
    Mark

  2. Simon says:

    Hi Mark

    Thanks for your comment. Sounds like a z-index type problem. As the menu dropdowns are positioned absolutely, relative to a relatively positioned container – the parent li – you need to set the z-index on the parent li and make sure that is higher than your jQuery slide. So it needs setting on .orangemenu li, rather than .orangemenu li ul.

  3. mutangana says:

    like you web site it realy good teacher

  4. lenta says:

    I would like to know how to do a third tier dropdown (dropdown going out of a dropdown)

  5. Simon says:

    I’ve updated the menu and code to support third and fourth level dropdowns. Be warned the third and subsequent levels don’t work properly in IE6 (although the second level is fine).

  6. Angelo says:

    Thank you for the plugin, I’m just starting to learn web design and scripts are currently above me. This worked well on my very first mockup, again, thanks!

  7. msrosyidi says:

    Wow, the first example work in IE 6 for all levels. I try using IE 6 on XP Sp3…

  8. Simon says:

    Yes, it should be fine in IE6.

  9. lenta says:

    Hi,
    I would like to know how to make the dropdown items display next to each other instead of underneath eachother. thanks

  10. Simon says:

    To do this you’ll need to set an explicit width on .orangemenu li ul, plus remove the clear:left statement from .orangemenu li li.

  11. lenta says:

    Hi Simon,
    my dropdown is still not displaying next to eachother after following your instructions..

  12. Simon says:

    Can you send me a link to your page?

  13. amin says:

    hi simon. Thank for ur plugin. nice & clear description.
    can u help me for right to left (persian – start at right side of page & the items is show on the right side & submenus is open in the left side of each items & so on) ? in addition can i use ur plugin 4 dynamic menu or submenu width according to length of max items width ?
    tnx again.

  14. Simon says:

    You should just be able to amend the css file like this to run rtl instead of ltr:

    .orangemenu li {
        filter: inherit;
        float: right;
        position: relative;
        width: 151px;
    }

    Using dynamic widths – you may have issues in older versions of IE, but otherwise I think it should be OK. You’ll need to remove the explicit widths from both li and a elements in the css.

  15. rib says:

    Great Code! 🙂
    Re5pect!

Useful? Interesting? Leave me a comment

I've yet to find a way of allowing code snippets to be pasted into Wordpress comments - so if you're trying to do this you'd be better off using the contact form.