用UL标签+CSS实现的柱状图特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是用UL标签+CSS实现的柱状图特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jquery标签式导航菜单，属于站长常用代码" />
<title>jquery标签式导航菜单</title>
 <script src="js/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$(".menubt").click(function(){
		$(this).blur();
		if($(this).siblings("div").css("display") == "none") {
			$(".menucount:visible").slideUp(200,function(){ $(this).parent().css("zIndex","100");});
			$(this).siblings("div").slideDown(200,function(){ $(this).parent().css("zIndex","10");});
			$(this).siblings("div").attr("id","#boxOpen");
			
		} else {
			$(this).siblings("div").slideUp(200,function(){ $(this).parent().css("zIndex","100");});
		}
	})
})
</script>
<style type="text/css">
body{
	margin:0;
	padding:0;
}
.menubox{
	position:absolute;
	width:100%;
	z-index:100;
}
.menucount {
	display:none;
	height:80px;
	overflow:hidden;
	background:#999999;
}
#boxOpen {
	height:80px;
	display:block;
}
.menubt {
	display:block;
	float:right;
	position:absolute;
	display:block;
	background:url(images/lanrentuku.gif);
	color:#FFFFFF;
	text-decoration:none;
	width:78px;
	height:21px;
	text-align:center;
	font-size:12px;
}

.menubtOpen {
	display:block;
	float:right;
	position:absolute;
	display:block;
	background:#0066FF;
	color:#FFFFFF;
	text-decoration:none;
	width:50px;
}
</style>
</head>

<body>
<div class="menubox">
	<div class="menucount"></div>
    <a class="menubt" style="right:240px;" href="#">菜单一</a>
</div>
<div class="menubox">
	<div class="menucount"></div>
    <a class="menubt" style="right:160px;" href="#">菜单二</a>
</div>
<div class="menubox">
	<div class="menucount"></div>
    <a class="menubt" style="right:80px;" href="#">菜单三</a>
</div>
<div class="menubox">
	<div class="menucount"></div>
    <a class="menubt" style="right:0;" href="#">菜单四</a>
</div>
<p>请刷新本页面，再点击菜单或下载到本地查看。</p>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)