show-notice
hide-notice

Tuesday 6 August 2013

Jquery UI Menu


Introduction:

A menu with the default configuration, disabled items and nested menus. A list is transformed, adding theming, mouse and keyboard navigation support. Try to tab to the menu then use the cursor keys to navigate.

Example:
<html>
<head>

<title>jQuery UI Menu - Default functionality</title>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="/resources/demos/style.css" rel="stylesheet"></link>
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
<style>
.ui-menu { width: 150px; }
</style>
</head>
<body>
<ul id="menu">
<li class="ui-state-disabled"><a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634#">Aberdeen</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634#">Ada</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634#">Adamsville</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634#">Addyston</a></li>
<li>
<a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634#">Delphi</a>
<ul>
<li class="ui-state-disabled"><a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634#">Ada</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634#">Saarland</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634#">Salzburg</a></li>
</ul>
</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634#">Saarland</a></li>
<li>
<a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634#">Salzburg</a>
<ul>
<li>
<a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634#">Delphi</a>
<ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634#">Ada</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634#">Saarland</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634#">Salzburg</a></li>
</ul>
</li>
<li>
<a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634#">Delphi</a>
<ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634#">Ada</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634#">Saarland</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634#">Salzburg</a></li>
</ul>
</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634#">Perch</a></li>
</ul>
</li>
<li class="ui-state-disabled"><a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634#">Amesville</a></li>
</ul>
</body>
</html>


SHARE THIS POST   

0 comments :

Post a Comment

Design by Gohilinfotech | www.gohilinfotech.blogspot.com