Menu Widget
Menus play a vital role in user friendly interfaces. Menu widget is quite simple to use

Basic Usage
$.domLoaded(function() {
	
	$.get("#accord1").widget("menu");
	
}
HTML Template for Tabs
"menubar" class should be applied to top menus and "menu" class should be applied to all other menu items
			<div id="parent1"> 
				<div class="menubar">File
				
					<div class="menu">Open</div>
					<div class="menu">Secondary Menu 
					
						<div class="menu">Sub Menu 1</div>
						<div class="menu">Secondary Menu 
						
							<div class="menu">Sub Menu 1</div>
							<div class="menu">Sub Menu 2</div>
							
						</div>
						
					</div>			
					<div class="menu">Exit</div>
					
				</div>	
				
				<div class="menubar">Help</div>
				
			</div>


Menu Widget Examples Example 1
JS HTML
			$.domLoaded( function() {
			
				$.get("#dial").widget("dialog", {
					head : {
						title : "Dialog with Menus"
					},
					dim : { wid : 500, ht : 300},
					draggable : true,
					maximize : "document",
					close : true
				});			

				$.get("#parent1").widget("menu");	
				


			});
		<div id="dial">
			<div id="parent1"> 
				<div class="menubar">File
					<div class="menu">Open</div>
					<div class="menu">Secondary Menu 
						<div class="menu">Sub Menu 1</div>
						<div class="menu">Secondary Menu 
							<div class="menu">Sub Menu 1</div>
							<div class="menu">Sub Menu 2</div>
						</div>
					</div>
					<div class="menu">Secondary Menu
						<div class="menu">Sub Menu 1</div>
						<div class="menu">Sub Menu 2</div>
					</div>				
					<div class="menu">Exit</div>
				</div>
				<div class="menubar" id="fail">Edit
					<div class="menu">Open</div>
					<div class="menu">Secondary Menu
						<div class="menu">Sub Menu 1</div>
						<div class="menu">Sub Menu 2</div>
					</div>				
					<div class="menu">Exit</div>
				</div>			
				<div class="menubar">Help</div>
			</div>
		</div>
Result
Example 2
JS HTML
			$.domLoaded( function() {

				$.get("#parent1").widget("menu");			

			});
			
		<div id="dial">
			<div id="parent1"> 
				<div class="menubar">File
					<div class="menu">Open</div>
					<div class="menu">Secondary Menu 
						<div class="menu">Sub Menu 1</div>
						<div class="menu">Secondary Menu 
							<div class="menu">Sub Menu 1</div>
							<div class="menu">Sub Menu 2</div>
						</div>
					</div>
					<div class="menu">Secondary Menu
						<div class="menu">Sub Menu 1</div>
						<div class="menu">Sub Menu 2</div>
					</div>				
					<div class="menu">Exit</div>
				</div>
				<div class="menubar">Edit
					<div class="menu">Open</div>
					<div class="menu">Secondary Menu
						<div class="menu">Sub Menu 1</div>
						<div class="menu">Sub Menu 2</div>
					</div>				
					<div class="menu">Exit</div>
				</div>			
				<div class="menubar">View
					<div class="menu">Open</div>
					<div class="menu">Secondary Menu
						<div class="menu">Sub Menu 1</div>
						<div class="menu">Sub Menu 2</div>
					</div>				
					<div class="menu">Exit</div>
				</div>			
				<div class="menubar">Help</div>
			</div>
		</div>
Result