jQuery clickMenu plugin
Since there was no click-type-menu (application-like) plugin for jquery, here is mine:
It makes an unordered list into a menu, you have to click on to display. It supports unlimited submenus (only in theory) and has nifty shadows.
I took inspiration from here and here and for the shadows here, here and here. Thanks!
Here’s the demo! (which will be extended eventually)
Files:
clickmenu.js
clickmenu.css
You use it like this (better take a look at the demo-source):
<script type="text/javascript">
$(document).ready(function()
{
$('#list').clickMenu();
});
</script>
on this:
<ul id="list"> <li>Item one <ul> <li>Subitem one</li> <li>Subitem two</li> </ul> </li> <li>Item two</li> </ul>
It supports one option right now:
onClick - function - callback function triggered when a list item is clicked
<script type="text/javascript">
$(document).ready(function()
{
$('#list').clickMenu({onClick: function(){
alert($(this).text() + ' was clicked');
return false;
}});
});
</script>
Returning false will stop the default action of the clicked element.
Included in the clickmenu.js file is the shadowbox plugin, which draws shadows around the given container. It’s tested on the clickmenu plugin and two or three other items, but probably won’t work on some others.
The plugin was successfully tested on Firefox 2, Opera 9.10 and IE 6.
Known problems / limitations:
- the width of the submenu-items is predefined through the stylesheet - will have to look into a way to let it use as much space as it needs..
If you find any problems, especially memory leakage, please tell me.
Nate Cavanaugh
March 5th, 2007 at 8:59 am
Thank you for writing this. I was needing something like this for work, and I believe it will come in handy.
Also, thank you for actually keeping to the plugin authoring standards. It’s crazy how many plugins ignore the guide, and write the entire plugin, depending on the $ variable to be set to jQuery.
Thanks for your time and effort
salvatore
March 5th, 2007 at 10:29 am
noticed that for the first time we need to click to expand menu, and then a mouse over will do.
salvatore
rw
March 5th, 2007 at 7:21 pm
salvatore, thanks for pointing that out. it seems there is a bug, that hides the menu after moving the mouse outside the menu on some occasions. this should not happen, the menu should stay open until the user clicks somewhere.
I wanted to post a little update to it, but as it’s still in there in the new version, i’ll have to fix that first.