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

jQuery UI基础----12jQuery UI Widgets-menu（菜单

2015-10-05 13:38 645 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--所需要的支持文件-->
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link href="jquery-ui.min.css" rel="stylesheet" type="text/css">
<!--自己的js文件-->
<script src="menu.js"></script>
<!--默认是竖直菜单，现在设置成水平菜单-->
<style>
#menu{
width: 300px;
}
.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: 10px;
width: auto;
}
</style>
</head>
<body>
<ul id="menu">
<li>
<a href="#">java</a>
<ul>
<li><a href="#">java EE</a></li>
<li><a href="#">java SE</a></li>
<li><a href="#">java ME</a></li>
</ul>
</li>
<li>c
<ul>
<li><a href="#">c++</a></li>
<li><a href="#">c</a></li>
<li><a href="#">object-c</a></li>
</ul>
</li>
<li>c++</li>
<li>php</li>
<li>objectc</li>
</ul>
</body>
</html>
js:

/**
* Created by hao on 2015/10/5.
*/
$(function(){
//设置子菜单的位置
$("#menu").menu({position:{at:"left bottom"}});
})

需要依赖的库文件：
http://download.csdn.net/detail/zhaihaohao1/9156967

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

标签：

相关文章推荐

新的分享

章节导航