效果:利用ligerLayout、ligerAccordion实现可折叠的菜单效果
可能用到的js、css、images等,可到官网下载:
第01步:引入相应的文件
<head>
<link href="ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="ligerUI/js/plugins/ligerLayout.js"></script>
<script type="text/javascript" src="ligerUI/js/plugins/ligerAccordion.js">
</head>
第02步:编写body
<body>
<div id="main">
<div position="top">
<iframe frameborder="" width="100%" src="4top.html"> </iframe>
</div>
<div position="left" title="导航栏" id="menu">
<div title="工程管理">
<ul><li>工程信息</li></ul>
<ul><li>查询管理</li></ul>
<ul><li>甲方档案</li></ul>
<ul><li>项目管理</li></ul>
</div>
<div title="本月工程管理">
<ul><li>月度产值</li></ul>
<ul><li>工程成本</li></ul>
<ul><li>资金占用</li></ul>
</div>
<div title="工资管理">
<ul><li>工程管理</li></ul>
<ul><li>查询统计</li></ul>
<ul><li>本月管理</li> </ul>
</div>
</div>
<div position="center"></div>
</div>
</body>
第03步:利用LigerUI对界面进行操作
<head>
<script type="text/javascript">
$(function(){
//加入Layout
$("#main").ligerLayout({leftWidth:,topHeight:});
//将menu设置成可折叠(Acccordion)
$("#menu").ligerAccordion();
})
</script>
</head>
代码下载地址:
http://download.csdn.net/detail/poiuy1991719/8556841