this, that, and the other thing

You’re welcome to view the Demo, download the Code, or read the mini-tutorial. The image on the left shows the “closed” and “open” states, respectively, of the last item on the menu.

MenuOpener is a Javascript class I wrote with the help of Mootools. The key ingredient for making use of this class is a vertical menu structure with overflow. MenuOpener adds event handlers for the custom Mootools events “mouseenter” and “mouseleave,” exposing the overflow of a particular menu item when you roll your mouse over it. I use this primarily to show thumbnails of the web pages associated with the menu item links.

In addition to creating the artwork for the menu items, the main task for the user is to figure out what the margins or spacings should be between the individual menu items. That’s it, in the proverbial nutshell.

Before I began writing the code for menuOpener, I found myself fiddling around with Samuel Birch’s excellent imageMenu program, which can be found at his website, phatfusion. ImageMenu works flawlessly, but I needed something that could expand a vertical menu, and Birch’s code is set up for horizontal menu structures. Also, I needed to be able to squeeze an adjustable margin in between the menu elements, and control the positioning of text within the individual menu items. Should I attempt to rewrite Birch’s code? The problem was, Birch’s imageMenu is configured in an entirely different direction than the one I needed to go.

Well, you know the answer to this story: I decided to write my own expanding menu class, which I cleverly named menuOpener, in tribute to banal and trite naming schemes everywhere.

MenuOpener is a lightweight (~3kb) piece of Javascript that leverages the power of the Mootools framework. Element heights, margins and paddings are dynamically adjusted based on parameters supplied by the user. Creating an instance of the menuOpener class is simple:

	var myMenuOptions = {
		wrapper: 'side_nav',
		menuItems: '.side_nav',
		navMask: '.nav_mask',
		navText: '.nav_text',
		mgnLarge: $empty,
		mgnSmall: 15,
		mgnNorm: 22
	};

	var myMenuOpener =
	new MenuOpener(myMenuOptions);

Of the default options, mgnLarge, mgnSmall, and mgnNorm are the ones you’d typically use. The other 4 are class and id names, which would only be changed if you modified the underlying CSS.

The following parameters would likely be in a typical setup:

	var myMenuOptions = {
		mgnLarge: 0,
		mgnSmall: 15,
		mgnNorm: 22
	};

Where mgnNorm refers to the margin or spacing between menu items when a mouseenter event has not occurred, mgnLarge is the spacing between an opened menu item and its nearest neighbor, and mgnSmall refers to the decreased margins between the remaining menu items during a mouseenter.

Then again, it might be easier to simply view a DEMO of the menu opener in operation. Or if you’d prefer, go ahead and download the demo using the link in the upper right of the page.

Oh, one more thing before I forget … the code fires off 2 events: a “complete” event that occurs after all the mouseenter transitions have taken effect (and a menu item has been opened), and a “closed” event, fired after the mouseleave transitions have happened and all the menu items have been returned to their closed states.