jQuery Menu plugin demo
plugin page

# Available options:

options which affect the menu:

- showDelay - The number of milliseconds to wait before opening the menu after hovering over the target. Default value: 200
- hideDelay - The number of milliseconds to wait before closing the menu. Default value: 200
- hoverOpenDelay - The number of milliseconds to wait before opening the topmost-menu (root) (without clicking it!). Default value: 0 (disabled!)
- offsetTop - The number of pixels to offset the position of the topmost-menu (root) to the top. Default value: 0
- offsetLeft - The number of pixels to offset the position of the topmost-menu (root) to the left. Default value: 0
- minWidth - The minimal number of pixels of the menus width. Default value: 0
- onOpen - Callback function which is triggered when a menu is opened. Default value: null
- onClose - Callback function which is triggered when a menu is closed. Default value: null

options which affect the menuItems:

- onClick - Callback function which is triggered when a menuItem is clicked. The passed parameters are: the event object and the menuItem instance. Default value: null
- arrowSrc - URL of the image to be used as an arrow indicating a submenu. Default value: null (no arrow image!)

options which are only used, when building a menu from HTML markup:

- copyClassAttr - Copies the class attribute of the LI elements to the equivalent menuItems. Default value: false

# Example one:

- create a menubar from an unordered list
- used on an unordered list, the plugin takes its direct <li>-children, which will be the root items (File, Edit...), and searches each for an <ul>-child, which holds the menu-items (New window, Save, Print...).
- empty <li>-elements are used as seperators

JavaScript code:

    	var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', onClick: function(e, menuItem){
    		alert('you clicked item "' + $(this).text() + '"');
    	}};
    	$('#menuone').menu(options);

HTML markup:

    	<!-- note: the plugin doesn't need the classes, they're only used for styling! -->
    	<ul id="menuone" class="menu">
    		<li class="menumain">File
    			<ul><li>New window</li>
    				<li></li> <!-- separator -->
    				<li>Save...</li>
    				<li>Print...</li>
    				<li></li> <!-- separator -->
    				<li>Exit</li>
    			</ul>
    		</li>
    		<li class="menumain">Edit
    			<ul><li>Undo</li>
    				<li>Redo</li>
    				<li></li> <!-- separator -->
    				<li>Cut</li>
    				<li>Copy</li>
    				<li>Paste<ul><li>All</li><li>Something</li></ul></li>
    				<li>Delete</li>
    			</ul>
    		</li>
    		<!-- ...and even more... -->
    	</ul>

Result:

..some content..

..some content..

..some content..

# Example two:

- create a menu from javascript and open it when clicking on the element with the id "menutwo"
- when a second parameter ist passed (items), the plugin will use it as menu content

JavaScript code:

    	var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};
    	var items = [	{src: 'test', url:'http://www.jquery.com'},
    					{src: ''}, /* separator */
    					{src: 'test2', subMenu: [	{src: 'sub 1'},
    												{src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'},
    												{src: 'sub 3'}]}];
    	$('#menutwo').menu(options, items);

HTML markup:

    	<p><span id="menutwo">Menu Button</span></p>

Result:

..some content..

Menu Button

..some content..

# Example three:

- same as example two, but without passing the items as parameter to the plugin
- the plugin looks inside the elment for an unordered list, which holds the menu content

JavaScript code:

    	var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};
    	$('#menuthree').menu(options);

HTML markup:

    	<div id="menuthree">Menu Button
    		<ul>
    			<li><a href="http://www.jquery.com">test</a></li>
    			<li></li> <!-- separator -->
    			<li>test2
    				<ul>
    					<li>sub 1</li>
    					<li><a href="http://p.sohei.org" target="_blank">sub 2</a></li>
    					<li>sub 3</li>
    				</ul>
    			</li>
    		</ul>
    	</div>

Result:

..some content..

Menu Button

- test
- test2
  - sub 1
  - sub 2
  - sub 3

..some content..

# Example four:

- same (result) as example two, but this time creating the menu by using the $.Menu and $.MenuItem classes and its methods

JavaScript code:

    	var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};

    	//creating a menu without items
    	var menu = new $.Menu('#menufour', null, options);

    	//adding items to the menu
    	menu.addItems([
    		new $.MenuItem({src: 'test', url:'http://www.jquery.com'}, options),
    		new $.MenuItem({src: ''}) /* separator */
    	]);
    	var itemWithSubmenu = new $.MenuItem({src: 'test2'}, options);

    	//creating a menu with items (as child of itemWithSubmenu)
    	new $.Menu(itemWithSubmenu, [
    		new $.MenuItem({src: 'sub 1'}, options),
    		new $.MenuItem({src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'}, options),
    		new $.MenuItem({src: 'sub 3'}, options)
    	], options);

    	//adding the submenu to the main menu
    	menu.addItem(itemWithSubmenu);

HTML markup:

    	<p><span id="menufour">Menu Button</span></p>

Result:

..some content..

Menu Button

..some content..

# Example five:

- related to example two, the menu items can also be passed as a jquery selector (selecting an <ul>-element!)

JavaScript code:

    	var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', copyClassAttr: true};
    	$('#menufive>img').menu(options, '#menufivelist');

HTML markup:

    	<p id="menufive">Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /></p>

    	<ul id="menufivelist" style="display:none;">
    		<li>one</li>
    		<li class="red">two</li>
    		<li class="blue">three</li>
    		<li>four
    			<ul>
    				<li>four.1
    					<ul>
    						<li>four.1.1</li>
    						<li>four.1.2</li>
    						<li>four.1.3</li>
    					</ul>
    				</li>
    				<li>four.2</li>
    				<li>four.3</li>
    			</ul>
    		</li>
    	</ul>

Result:

..some content..

Menu Button - Menu Button - Menu Button

..some content..

- one
- two
- three
- four
  - four.1
    - four.1.1
    - four.1.2
    - four.1.3
  - four.2
  - four.3