1、html依次jquery-1.12.3.min.js、jquery-ui.min.js、object.js、jquery-ui.min.css
并在项目中引入images文件夹，从jquery ui网站上都可以下载下来。注意选好主题。 <!DOCTYPE html>
<html en">
<head>
<meta charset="UTF-8">
<script src="jquery-1.12.3.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="object.js"></script>
<link rel="stylesheet" href="jquery-ui.min.css">
<style type="text/css">
#navigator{
position: absolute;
top: 40px;
left: 35px;
}
.ui-menu:after{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.ui-menu .ui-menu-item {
display: inline-block;
float: left;
margin: 0;
padding: 0;
width: 150px;
font-size: 24px;
}
</style>
<title></title>
</head>
<body>
<div id="navigator">
<ul id="menu">
<li>Aberdeen</li>
<li>Ada</li>
<li>Adamsville</li>
<li>Addyston</li>
<li>Delphi
<ul>
<li class="ui-state-disabled">Ada</li>
<li>Saarland</li>
<li>Salzburg an der schönen Donau</li>
</ul>
</li>
<li>Saarland</li>
<li>Salzburg
<ul>
<li>Delphi
</li>
<li>Delphi
</li>
<li>Perch</li>
</ul>
</li>
<li>Amesville</li>
</ul>
</div>
</body>
</html> 2、object.js
$(document).ready(function(){
$("#menu").menu({
position: { my: "right top", at: "right-5 bottom+5" },
icons: { submenu: "ui-icon-carat-1-s" }
});
}); 3、效果如下
