Menu.js

Introducing Menu.js

Menu.js is a free, small JavaScript (drop-down) menu for developers. It's unobtrusive and only requires a HTML unordered list and your own CSS styles.

Version 1.3.1 has been released

Very important bug fix for Internet Explorer

History

I've had to create numerous drop-down menus in the years I've been making websites, and because not all browser support pure-CSS menus I've had to use JavaScript scripts and libraries. And although I used all kinds of free and proprietary scripts, none ever seemed to do exactly what I wanted or it took me a whole lot of effort.

Therefore I created Menu.js, because JavaScript menus aren't all that complicated. Because it's unobtrusive and relies heavily on valid (X)HTML and CSS, it's unlikely to break on new browser versions.

Features

Because I don't have all the time in the world, and Menu.js is pretty simple and new, there are certain limitations:

Compatibility

To make sure Menu.js will work properly in all situations, I written the code to work in Prototype 1.5 and 1.6, and have tested it with most popular browsers, including:

Note: These test are done with simple, straight forward, style sheets for both horizontal and vertical menus. You should take in mind to test your CSS for this menu on multiple browsers as well, since these are the main reasons menus "break".

Examples

I've created the most simple set-up for both the horizontal and the vertical menu. It does not look pretty, but you can see how it works in the source code:

But if you want to find out what Menu.js can really do for you website, check out these real life examples:

Modified versions:

Download (for free)

Right-click > Save as on the link below to download Menu.js.

If you are using Menu.js on your website, please notify me via email: niek@menujs.net

License

As of version 1.2 Menu.js is open source and released under the MIT license. This basically allows you to use Menu.js everywhere and to modify it—as long as you credit me.

View the full license text

I've created Menu.js in my spare time, and made it open source, so you can download it free of charge. If you however want to thank me for my work and help me pay for hosting and future development, please consider a donation via payPal:

Installation/Configuration

Menu.js does not require any installation at all, you just have to include it into your HTML. Make sure you've also included prototype! After inclusion you have to initialize the Menu, by providing the ID of your menu and possibly some configuration settings.

Include into HTML

<script src="prototype.js" type="text/javascript"></script>
<script src="Menu.js" type="text/javascript"></script>
<script type="text/javascript">
  Menu.init("menu", {"orientation": Menu.VERTICAL, "hidePause": 0.5});
</script>

Configuration options

As seen above, all configuration options can be set in a JSON string. Available options:

Read on for more information about the installation and configuration options.

Changelog

Version 1.3.1

[15-07-2009] Very important bug fix for Internet Explorer.

Apparently the whole script did not work due to the performance improvements in version 1.3. All should be fixed now! (And I strongly recommend to update as soon as possible!)

Version 1.3

[27-06-2009] In this release you can find the first feature request I ever got, and solutions to some minor flexibility issues I ran into myself:

View the full changelog for older versions