Overflow menu a jQuery UI Widget

I decided to turn an earlier post idea (See http://jebaird.com/blog/using-jquery-create-overflow-menu-seen-google-wave ) into a jQuery UI widget. Its based on the google wave menu.

What It Does

 It detects which menu items are hidden in the parent element overflow. Takes the hidden items clones them and appends them to a secondary menu. The cloned items are visible in a drop down menu when the user clicks on the more link.

Getting setup

The suggested markup and css is as follows



	height: 1em;
	width: 200px;
nav li{

 	display: block;


For this widget to work your target(In my demo nav) needs to have a width and an a height that javascript can pick up on.


parameter description default
items Selector, of the menu items > *
itemsParentTag by default the plugin assumes that the items are going to be in an unordered list, you might change this to div if this isn't the case ul
guessHeight for this widget to work the target must have a width and height. It tries to guess the height of the target by using the outer height of the first item true
refreshOn This is element upon resize the refresh method is called. If you have a special event plugin that detects elements rezise other than window you can change this from the default $(window)
label controls what the more link says, can be text or html more


name description
refresh you might call this if you added another item option to the target and you want it to show up in the secondary menu
open show the secondary menu
close hide the secondary menu
toggle toggle the secondary menu


name description
change triggered after the refresh method has finished
beforeChange triggered before the meat of the refresh method
close triggered after the secondary menu is hidden
open triggered after the secondary menu is shown