Another update for the jQuery plugin. It’s got a LOT better (and if not, than at least faster!).

Please take a look at the demo.

Files: (new version here)

• jquery.clickmenu.js (13kb)
• jquery.clickmenu.pack.js (5kb)
• clickmenu.css (2kb - it won’t work without this)

Example:

<script type="text/javascript">
$(document).ready(function()
{
    $.fn.clickMenu.setDefaults({arrowSrc:'arrow_right.gif', onClick: function(){/*do something*/}});
    $('selector1').clickMenu(); /* use default values */
    $('selector2').clickMenu({arrowSrc:''}); /* dont use an arrow for submenus */
    $('selector3').clickMenu({fadeTime: 2000, subDelay: 1000, mainDelay: 500}); /* slow menu */
});
</script>

Available options:

• onClick - function - callback function triggered when a list item is clicked
• arrowSrc - string - url of the image to be used as an arrow indicating a submenu (e.g. “images/somearrow.jpg” or an empty string if you don’t want an arrow)
• mainDelay - string or number - the time to wait before starting the fadein after hovering over a main menu item (”slow”, “normal” or “fast” or the time in milliseconds - e.g. 1000)
• subDelay - string or number - the time to wait before starting the fadein after hovering submenu item (”slow”, “normal” or “fast” or the time in milliseconds - e.g. 1000)
• fadeTime - string or number - the speed at which the fadein/fadeout animation runs (”slow”, “normal” or “fast” or the time in milliseconds - e.g. 1000)

Changelog:

• change: made a lot changes in the traversing routines to speed things up (having better memory usage now as well)
• change: added $.fn.clickMenu.setDefaults() for setting global defaults
• fix: hoverbug when a main menu item had no submenu
• fix: some bugs i found while rewriting most of the stuff
• change: renamed file to jquery.clickmenu.js

Known problems:

• memory usage’s gotten better, but is still far from perfect
• the css-defined min-width is not working on ie, what may make the submenus really narrow

The premise:
While using Dave Cohen’s hovertip jQuery plugin I found a liking to his drop shadow implementation (which is based on theirs) and used it quite a lot on my own, it being my favourite drop shadow method (mainly cause it’s using transparent .png images).

The problem:
As i was writing my clickMenu plugin for jQuery, which I wanted to behave like your common Windows (or whatever) application menu, I wanted it having shadows, which looked alike too. And there is the problem, they didn’t. The shadows at the lower left and upper right border weren’t indeted as the shadow of an application menu.

Let’s visualize it:

On the left you can see a application menu with it’s shadows and on the right a text container with PIE styled shadows.
Zoomed in, it looks like this:

As you can see, the application shadow (on the left) is indented to the right and the PIE styled (on the right) isn’t nearly as much.

The solution:
After some trial and error, I’ve got working css-styled png-based shadows, which do exactly what I want.

It looks like this:

And zoomed in:

Now it’s as nicly indented as the application shadow.

If you want to make a shadow around the following..

<img src="church.jpg" />

..you need to change it into this:

<div class="outerbox">
	<div class="shadowbox1"></div>
	<div class="shadowbox2"></div>
	<div class="shadowbox3"></div>
	<img src="church.jpg" />
</div>

(As most of the other css shadow methods it’s producing quite an overhead, too.)

Here’s a demo.

Files:

• shadow image (5.6 kb)
• css file (0.5 kb)

It’s tested sucessfully on Firefox 2, Opera 9 and IE 6, while not really working in IE (not displaying any shadows) but not breaking it either.

Note: The outerbox has to be floating or positioned absolute or set to a fixed width, or else it won’t shrink around the content!

Here’s a little update for the plugin. Thanks for pointing out some problems.

Demo

Files: (new version here)
clickmenu.js (8kb)
clickmenu.css (2kb - it won’t work without this)

Changelog:

• change: the width of the submenus is no longer fixed, the elements can use as much space as they need (fix for overflowing list elements)
• change: the submenu-arrow is now an img, not the background-img of the list element - that allows better positioning, and background-changes on hover (you have to set the image through the arrowSrc option)
• fix: clicking on a clickMenu while another was already open, didn’t close the open one
• change: clicking on the open main menu item will close it
• fix: on an open menu moving the mouse to a main menu item and moving it fastly elsewere hid the whole menu

Known (and worked on) problems:

• there is still a memory leak somewhere, and thus it’s slowing the browser down
• the css-defined min-width is not working on ie, what may make the submenus too narrow

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.