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

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

	<!-- 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>
	

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

	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);
	

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

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

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

	<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>
	

Example four:

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

	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);
	

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

Example five:

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

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

	<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>
	

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