Reputation: 1892
I want to create a menu from existing UL in a massive html file in the index.html...the code is as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Menu - Default functionality</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"> </script>
<script type="text/javascript" src="menu.js"> </script>
<style type="text/css">
.ui-menu { width: 150px; }
</style>
</head>
<body>
<ul id="menu">
<li class="ui-state-disabled"><a href="#">Location</a></li>
<li><a href="">Engineer.Com</a></li>
<ul>
<li><a href="">HHT General</a></li>
<ul>
<li><a href="">Uploading Results</a></li>
</ul>
<li><a href="">Other</a></li>
<ul>
<li><a href="">Other</a></li>
<li><a href="">Sync Issues</a></li>
</ul>
<li><a href="">Test Results</a></li>
<ul>
<li><a href="">Results</a></li>
</ul>
</ul>
<li><a href="#">HHT</a></li>
<ul>
<li><a href="">EXFO</a></li>
<ul>
<li><a href="">Accessories</a></li>
<li><a href="">Earthing</a></li>
<li><a href="">Improvements</a></li>
<li><a href="">Other</a></li>
<li><a href="">Sync Issues</a></li>
<li><a href="">Test Heads</a></li>
<li><a href="">Testing</a></li>
<li><a href="">Training</a></li>
<li><a href="">Updates</a></li>
</ul>
<li><a href="">HHT General</a></li>
<ul>
<li><a href="">Accessories</a></li>
<li><a href="">Calibration</a></li>
<li><a href="">Contractors</a></li>
<li><a href="">HHT Scripts</a></li>
<li><a href="">Improvements</a></li>
<li><a href="">Other</a></li>
<li><a href="">Remote Assist</a></li>
<li><a href="">Results</a></li>
<li><a href="">Standards</a></li>
<li><a href="">Sync Issues</a></li>
<li><a href="">Testing</a></li>
<li><a href="">ToC Process</a></li>
<li><a href="">Training</a></li>
<li><a href="">Updates</a></li>
<li><a href="">Uploading Results</a></li>
</ul>
<li><a href="">JDSU</a></li>
<ul>
<li><a href="">Improvements</a></li>
<li><a href="">Modules</a></li>
<li><a href="">Results</a></li>
<li><a href="">Sync Issues</a></li>
<li><a href="">Testing</a></li>
</ul>
<li><a href="">Process</a></li>
<ul>
<li><a href="">Process</a></li>
<li><a href="">Testing</a></li>
</ul>
<li><a href="">Stores</a></li>
<ul>
<li><a href="">Accessories</a></li>
</ul>
<li><a href="">Test Results</a></li>
<ul>
<li><a href="">Improvements</a></li>
<li><a href="">Results</a></li>
</ul>
<li><a href="">Testing</a></li>
<ul>
<li><a href="">Earthing</a></li>
<li><a href="">Improvements</a></li>
<li><a href="">Modules</a></li>
<li><a href="">Results</a></li>
<li><a href="">Test Heads</a></li>
<li><a href="">Testing</a></li>
</ul>
</ul>
<li><a href="#">iPhone</a></li>
<ul>
<li><a href="">EXFO</a></li>
<ul>
<li><a href="">Sync Issues</a></li>
</ul>
<li><a href="">HHT General</a></li>
<ul>
<li><a href="">Improvements</a></li>
<li><a href="">Remote Assist</a></li>
</ul>
<li><a href="">JDSU</a></li>
<ul>
<li><a href="">Other</a></li>
</ul>
<li><a href="">Other</a></li>
<ul>
<li><a href="">Other</a></li>
</ul>
<li><a href="">Process</a></li>
<ul>
<li><a href="">Updates</a></li>
</ul>
<li><a href="">Test Results</a></li>
<ul>
<li><a href="">Uploading Results</a></li>
</ul>
<li><a href="">Tools</a></li>
<ul>
<li><a href="">Tools</a></li>
</ul>
<li><a href="#">Other</a></li>
<ul>
<li><a href="">Other</a></li>
<ul>
<li><a href="">Other</a></li>
</ul>
<li><a href="">Testing</a></li>
<ul>
<li><a href="">Improvements</a></li>
</ul>
</ul>
<li><a href="#">Process</a></li>
<ul>
<li><a href="">Eclipse</a></li>
<ul>
<li><a href="">ToC Process</a></li>
</ul>
<li><a href="">FastTest2</a></li>
<ul>
<li><a href="">Results</a></li>
</ul>
<li><a href="">Process</a></li>
<ul>
<li><a href="">DCoE</a></li>
<li><a href="">Process</a></li>
<li><a href="">ToC Process</a></li>
</ul>
<li><a href="">Testing</a></li>
<ul>
<li><a href="">Testing</a></li>
</ul>
</ul>
<li><a href="#">Quality</a></li>
<ul>
<li><a href="">FVR</a></li>
<ul>
<li><a href="">Improvements</a></li>
</ul>
<li><a href="">Other</a></li>
<ul>
<li><a href="">Contractors</a></li>
</ul>
<li><a href="">Process</a></li>
<ul>
<li><a href="">Contractors</a></li>
<li><a href="">Process</a></li>
<li><a href="">Standards</a></li>
</ul>
<li><a href="">Quality Standards</a></li>
<ul>
<li><a href="">Contractors</a></li>
<li><a href="">Standards</a></li>
</ul>
<li><a href="">Test Resutls</a></li>
<ul>
<li><a href="">Results</a></li>
</ul>
</ul>
<li><a href="#">Stores</a></li>
<ul>
<li><a href="">HHT General</a></li>
<ul>
<li><a href="">Accessories</a></li>
</ul>
</ul>
<li><a href="#">Test System</a></li>
<ul>
<li><a href="">Eclipse</a></li>
<ul>
<li><a href="">Inventory Failures</a></li>
<li><a href="">Testing</a></li>
</ul>
<li><a href="">FastTest2</a></li>
<ul>
<li><a href="">Results</a></li>
</ul>
<li><a href="">Inventory</a></li>
<ul>
<li><a href="">Inventory Failures</a></li>
</ul>
<li><a href="">Test Results</a></li>
<ul>
<li><a href="">Inventory Failures</a></li>
<li><a href="">Results</a></li>
<li><a href="">Test Heads</a></li>
</ul>
<li><a href="">Testing</a></li>
<ul>
<li><a href="">DCoE</a></li>
<li><a href="">Improvements</a></li>
<li><a href="">Night Routining</a></li>
<li><a href="">OLID</a></li>
<li><a href="">Results</a></li>
<li><a href="">Test Heads</a></li>
<li><a href="">Testing</a></li>
</ul>
</ul>
<li><a href="#">Tools</a></li>
<ul>
<li><a href="">Stores</a></li>
<ul>
<li><a href="">Ordering</a></li>
</ul>
<li><a href="">Tools</a></li>
<ul>
<li><a href="">Amplifiers</a></li>
<li><a href="">Tools</a></li>
</ul>
</ul>
</body>
</html>
Whenever I call the menu function in the menu.js file it gives error at run-time:
my menu.js file contains nothing other than document ready function:
$(document).ready(function(){
$('#menu').menu({
});
});
Any ideas?
Thank you all for your over whelming response...
I have downloaded the package but it has too many files...
I have tried jquery-ui-1.10.4.custom.js and jquery.ui.menu.js but it still not converting my UL list to menu... Am i missing anything else?
This is the order of my script tags:
<script type="text/javascript" src="jquery-1.8.3.min.js"> </script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom.js"> </script>
<script type="text/javascript" src="menu.js"> </script>
Upvotes: 0
Views: 1116
Reputation: 1838
You don't load any other js than jQuery.js and menu.js. No method menu is given by jquery.
Maybe you thought about the .menu() jQuery UI method.
Upvotes: 1