侧边导航收缩伸展效果

来源：互联网发布：开淘宝店铺小技巧编辑：程序博客网时间：2024/05/14 12:15

http://www.jq22.com/jquery-info897

<!doctype html><html><head><meta charset="utf-8"><title>侧边导航</title><link href="css/base.css" type="text/css" rel="stylesheet"><script src="jquery-1.3.2.js" type="text/javascript"></script><style>

@charset "utf-8";/*reset*/body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; font-family:"微软雅黑"}table { border-collapse: collapse; border-spacing: 0; }fieldset, img { border: 0; }address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }ol, ul { list-style: none; }caption, th { text-align: left; }h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }q:before, q:after { content: ''; }abbr, acronym { border: 0; font-variant: normal; }sup { vertical-align: text-top; }sub { vertical-align: text-bottom; }input:focus, textarea:focus, select:focus { outline: none; }select, input { vertical-align: middle; }legend { color: #000; }.clean:before, .clean:after, .clearfix:before, .clearfix:after { content: ""; display: table; }.clean:after, .clearfix:after { clear: both; }.clean, .clearfix { zoom: 1; }.clear { clear: both; }.fl { float: left; }.fr { float: right; }.break { word-wrap: break-word; width: inherit; }.linkhidden { text-indent: -9999em; overflow: hidden; }.hidden { display: none; }a{ text-decoration:none;}/*reset*/

.subNavBox{width:200px;border:solid 1px #e5e3da;margin:100px auto;}.subNav{border-bottom:solid 1px #e5e3da;cursor:pointer;font-weight:bold;font-size:14px;color:#999;line-height:28px;padding-left:10px;background:url(images/jiantou1.jpg) no-repeat;background-position:95% 50%}.subNav:hover{color:#277fc2;}.currentDd{color:#277fc2}.currentDt{background-image:url(images/jiantou.jpg);}.navContent{display: none;border-bottom:solid 1px #e5e3da;}.navContent li a{display:block;width:200px;heighr:28px;text-align:center;font-size:14px;line-height:28px;color:#333}.navContent li a:hover{color:#fff;background-color:#277fc2}</style><script type="text/javascript">$(function(){$(".subNav").click(function(){$(this).toggleClass("currentDd").siblings(".subNav").removeClass("currentDd")$(this).toggleClass("currentDt").siblings(".subNav").removeClass("currentDt")$(this).next(".navContent").slideToggle(300).siblings(".navContent").slideUp(500)})})</script></head><body>        <div class="subNavBox">        <div class="subNav currentDd currentDt">新闻中心</div>            <ul class="navContent " style="display:block">                <li><a href="#">添加新闻</a></li>                <li><a href="#">添加新闻</a></li>                <li><a href="#">添加新闻</a></li>                <li><a href="#">新闻管理</a></li>            </ul>        <div class="subNav">关于我们</div>            <ul class="navContent">                <li><a href="#">添加新闻</a></li>                <li><a href="#">新闻管理</a></li>                <li><a href="#">添加新闻</a></li>                <li><a href="#">新闻管理</a></li>            </ul>        <div class="subNav">业务系统</div>            <ul class="navContent">                <li><a href="#">添加新闻</a></li>                <li><a href="#">添加新闻</a></li>                <li><a href="#">新闻管理</a></li>            </ul>        <div class="subNav">招商加盟</div>            <ul class="navContent">                <li><a href="#">添加新闻</a></li>                <li><a href="#">添加新闻</a></li>                <li><a href="#">新闻管理</a></li>                <li><a href="#">添加新闻</a></li>                <li><a href="#">新闻管理</a></li>            </ul>        </div></body></html>

0 0