<!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> |
.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> |
中级程序员
by: 玫瑰刺伤指尖Evllis 发表于:2016-07-25 10:27:18 顶(0) | 踩(0) 回复
建议增加功能: 浏览DOME效果. 那样用户看了以后,会更直观一些.
回复评论