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

可滑动展开折叠的jQurey简洁信息导航菜单

2012-03-12 21:58 417 查看
<!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>
4000
新闻列表</li>

<li >新闻列表</li>

<li>新闻列表</li>

<li>新闻列表</li>

</ul>

</div>

</div>

</body>

</html>

 

借鉴一下
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  class div html button border input
相关文章推荐
新的分享
章节导航