2 files changed, 85 insertions, 0 deletions
diff --git a/demos/menu/index.html b/demos/menu/index.html
index 9983dbfd0..f55d16514 100644
--- a/demos/menu/index.html
+++ b/demos/menu/index.html
@@ -12,6 +12,7 @@
 			<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
 			<li><a href="contextmenu.html">Contextmenu</a></li>
 			<li><a href="topalignmenu.html">Top-aligned sub menus</a></li>
+			<li><a href="navigationmenu.html">Navigation menu</a></li>
 		</ul>
 	</div>
 </body>
diff --git a/demos/menu/navigationmenu.html b/demos/menu/navigationmenu.html
new file mode 100644
index 000000000..315932981
--- /dev/null
+++ b/demos/menu/navigationmenu.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<title>jQuery UI Menu - Navigation Menu demo</title>
+	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+	<script src="../../jquery-1.6.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<link href="../demos.css" rel="stylesheet" />
+	<script>
+	$(function() {
+		$("#navMenu").menu({
+			select: function( event, ui ) {
+				var link = ui.item.children( "a:first" );
+				if ( link.attr( "target" ) || event.metaKey || event.shiftKey || event.ctrlKey ) {
+					return;
+				}
+				location.href = link.attr( "href" );
+			}
+		});
+	});
+	</script>
+	<style>
+		body { font-size:62.5%; }
+		.ui-menu { width: 200px; margin-bottom: 2em; }
+	</style>
+</head>
+<body>
+
+<div class="demo">
+
+	<ul id="navMenu">
+		<li><a href="?Aberdeen">Aberdeen</a></li>
+		<li><a href="?Ada">Ada</a></li>
+		<li><a href="?Adamsville">Adamsville</a></li>
+		<li><a href="?Addyston">Addyston</a></li>
+		<li>
+			<a href="?Delphi">Delphi</a>
+			<ul>
+				<li><a href="?Ada">Ada</a></li>
+				<li><a href="?Saarland">Saarland</a></li>
+				<li><a href="?Salzburg">Salzburg</a></li>
+			</ul>
+		</li>
+		<li><a href="?Saarland">Saarland</a></li>
+		<li>
+			<a href="?Salzburg">Salzburg</a>
+			<ul>
+				<li>
+					<a href="?Delphi">Delphi</a>
+					<ul>
+						<li><a href="?Ada">Ada</a></li>
+						<li><a href="?Saarland">Saarland</a></li>
+						<li><a href="?Salzburg">Salzburg</a></li>
+					</ul>
+				</li>
+				<li>
+					<a href="?Delphi">Delphi</a>
+					<ul>
+						<li><a href="?Ada">Ada</a></li>
+						<li><a href="?Saarland">Saarland</a></li>
+						<li><a href="?Salzburg">Salzburg</a></li>
+					</ul>
+				</li>
+				<li><a href="?Perch">Perch</a></li>
+			</ul>
+		</li>
+	</ul>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>A navigation menu. A list is transformed, adding themeing, mouse and keyboard navigation support. Try to tab to the menu and use the cursor keys to navigate.</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>