本文介绍了一种使用jQuery实现的可滑动展开折叠的简洁信息导航菜单设计。该设计通过简单的HTML结构配合CSS样式和jQuery脚本来实现菜单项的动态显示与隐藏效果，适用于网站后台管理系统等场景。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可滑动展开折叠的jQurey简洁信息导航菜单</title>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin:0; padding:0; font-size:12px;}
fieldset, img { border:0 }
.ms_box { width:147px; height:260px; overflow:hidden; }
.ms_box .ms_subbox { height:23px; overflow:hidden; }
.ms_box .ms_subbox h3 { padding-left:20px; height:22px; line-height:22px; color:#fff; background:url(admin/UploadFiles/201109/20110930155052706.png) no-repeat; border-bottom:#edf8fc 1px solid; cursor:pointer; }
.ms_box .ms_subbox.on h3 { background-position:0 -22px; }
.ms_box .ms_subbox li { padding-left:10px; line-height:22px; }
.ms_box .on { height:206px; }
</style>
<script src="js_date/js/jQuery.v1.5.2.js"></script>
</head>
<body>
<div class="ms_box" id="ms_box">
<div class="ms_subbox on">
<h3>新闻管理</h3>
<ul>
<li>新闻列表</li>
<li>新闻列表</li>
<li>新闻列表</li>
<li>新闻列表</li>
<li>新闻列表</li>
</ul>
</div>
<div class="ms_subbox">
<h3>邮件管理</h3>
<ul>
<li>新闻列表</li>
<li>新闻列表</li>
<li>新闻列表</li>
<li>新闻列表</li>
<li>新闻列表</li>
</ul>
</div>
<div class="ms_subbox">
<h3>链接管理</h3>
<ul>
<li>新闻列表</li>
<li>新闻列表</li>
<li >新闻列表</li>
<li>新闻列表</li>
<li>新闻列表</li>
</ul>
</div>
</div>
</body>
</html>
借鉴一下
扫一扫
1080
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
