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
<nav>
<ul>
<li><a>blah</a>
</ul>
</nav>
nav{
height: 1em;
width: 200px;
}
nav li{
display: block;
}
$('nav').overflowmenu();
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.
Options
| 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 |
Methods
| 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 |
Events
| 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 |
