您的位置：首页 > Web前端 > JQuery

jquery ui 实现横向导航菜单

2016-05-11 21:31 543 查看

1、html依次jquery-1.12.3.min.js、jquery-ui.min.js、object.js、jquery-ui.min.css

并在项目中引入images文件夹，从jquery ui网站上都可以下载下来。注意选好主题。

<!DOCTYPE html>
<html lang="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、效果如下

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： menu jquery jquery ui 导航

相关文章推荐

新的分享

章节导航