<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>收缩手风琴导航菜单</title>
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
//菜单隐藏展开
var tabs_i=0
$('.vtitle').click(function(){
var _self = $(this);
var j = $('.vtitle').index(_self);
if( tabs_i == j ) return false; tabs_i = j;
$('.vtitle em').each(function(e){
if(e==tabs_i){
$('em',_self).removeClass('v01').addClass('v02');
}else{
$(this).removeClass('v02').addClass('v01');
}
});
$('.vcon').slideUp().eq(tabs_i).slideDown();
});
})
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
a,a:hover{text-decoration: none;}
/*收缩菜单*/
.v{float:right;width:14px;height:14px;overflow:hidden;background:url(/jscss/demoimg/201402/vicon.png) no-repeat;display:inline-block;margin-top:-5px;margin-
bottom:-5px;}
.v01{background-position:0 0;}
.v02{background-position:0 -16px;;}
.vtitle{height:35px;background:#fbede0;line-height:35px;border:1px solid #ccb6a9;margin-top:-1px;padding-left:20px;font-size:15px;color:#4d4d4d;font-family:
"5FAE8F6F96C59ED1";cursor:pointer;}
.vtitle em{margin:10px 10px 0 0;}
.vconlist{background:#9cc;}
.vconlist li a{height:30px;line-height:30px;padding-left:30px;display:block;font-size:14px;color:#866f67;font-family:"5FAE8F6F96C59ED1";}
.vconlist li.select a,.vconlist li a:hover{color:#ed4948;text-decoration:none;}
</style>
</head>
<body>
<div style="width:268px;margin:30px auto 0 auto;">
<div class="vtitle"><em class="v v02"></em>源码下载</div>
<div class="vcon">
<ul class="vconlist clearfix">
<li class="select"><a href="javascript:;">Flash源码</a></li>
<li><a href="javascript:;">Ajax源码</a></li>
<li><a href="javascript:;">Java源码</a></li>
</ul>
</div>
<div class="vtitle"><em class="v"></em>网页特效</div>
<div class="vcon" style="display: none;">
<ul class="vconlist clearfix">
<li><a href="javascript:;">菜单代码</a></li>
<li><a href="javascript:;">广告代码</a></li>
<li><a href="javascript:;">表格特效</a></li>
</ul>
</div>
<div class="vtitle"><em class="v"></em>编程学院</div>
<div class="vcon" style="display: none;">
<ul class="vconlist clearfix">
<li><a href="javascript:;">服务器</a></li>
<li><a href="javascript:;">数据库</a></li>
<li><a href="javascript:;">Winform</a></li>
</ul>
</div>
</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>
|
