Version 1.3.1 has been released
Very important bug fix for Internet Explorer
- Very slim and very fast
- All styling is done via your own CSS
- Both horizontal and vertical menus are supported
- Support for multi-level submenus
- Usability through a pause before showing and hiding the submenu
Because I don't have all the time in the world, and Menu.js is pretty simple and new, there are certain limitations:
- Only one dynamic menu per page is supported
- Does not (yet) work with keyboard navigation (tabbing through the menu).
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:
- Firefox 2, 3
- Google Chrome 1, 2
- Internet Explorer 6, 7, 8
- Opera 9, 10
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".
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:
- www.hightechcampus.nl - Version 1.2 (credited as 1.1 - Modified)
- www.wirelesspowerconsortium.com - Version 1.2 (credited as 1.1 - Modified)
- www.europunk.net - Version 1.1
- www.zvhydra.nl - Version 1.1
- www.prinsautogas.com - Version 1.0
- www.aprico.tv - Version 1.0, slightly modified
- www.care.nl - Version 1.0 ported to MochiKit
- www.skiing.nl - Version 1.0 ported to MochiKit + 3rd level
Download (for free)
Right-click > Save as on the link below to download Menu.js.
- Menu.js 1.3.1 + prototype 22.214.171.124 (ZIP archive)
If you are using Menu.js on your website, please notify me via email: firstname.lastname@example.org
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.
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:
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
As seen above, all configuration options can be set in a JSON string. Available options:
- orientation (int; one of: Menu.HORIZONTAL, Menu.VERTICAL)
- showPause (float; in seconds; default: 0.0)
- hidePause (float; in seconds; default: 1.0)
- opacity (float; 0 = transparent, 1 = opaque; default: 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!)
[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:
- Added a (configurable) pause before showing the submenu (default: 0, backward-compatible)
- The "menu_open" class for hover styles is now being applied to both the LI and A elements
- Fixed minor bug concerning 'remembering' active submenus (multi-level)