实现支付宝经典导航条效果
代码
<!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=utf-8" />
<title>竖直导航菜单</title>
<style type="text/css">
<!--
* { margin:0; padding:0; }
body { font:12px Verdana, Geneva, sans-serif; padding:20px; }
ul { list-style:none; }
#menu { margin:0 auto; width:950px; }
a { text-decoration:none; }
#item,.sub-item { height:1%; overflow:hidden; }
#menu div,#menu ul { height:35px;}
#menu ul li { width:110px; height:35px; line-height:35px; float:left; text-align:center; }
#menu ul li a { font-size:14px; color:#fff; font-weight:bold; }
#menu #bot li a { color:#777; font-weight:normal; font-size:12px; }
#top { background:url(http://www.aspxcs.net/UploadFiles/2010/3/201003201256543645.gif) left -36px repeat-x;}
#top #item { background:url(http://www.aspxcs.net/UploadFiles/2010/3/201003201256543645.gif) left top no-repeat; padding-left:10px; }
#top li { background:url(http://www.aspxcs.net/UploadFiles/2010/3/201003201256543645.gif) right -110px no-repeat; }
#top .ext1 { float:right; width:2px; height:35px; background:url(http://www.aspxcs.net/UploadFiles/2010/3/201003201256543645.gif) right -73px no-repeat;}
#item a,#item span { display:block; height:27px; line-height:27px; margin-top:4px;}
#item a { margin-right:7px; margin-left:5px;}
#item a:hover { background:url(http://www.aspxcs.net/UploadFiles/2010/3/201003201256530350.png) left top no-repeat;}
#item a:hover span { background:url(http://www.aspxcs.net/UploadFiles/2010/3/201003201256530350.png) right -27px no-repeat;}
#bot { background:url(http://www.aspxcs.net/UploadFiles/2010/3/201003201256545110.png) left -39px repeat-x;}
#bot .sub-item { background:url(http://www.aspxcs.net/UploadFiles/2010/3/201003201256545110.png) left -2px no-repeat; padding-left:10px; }
#bot .sub-item li { background:url(http://www.aspxcs.net/UploadFiles/2010/3/201003201256545110.png) right -114px no-repeat;}
#bot .sub-item .ext2 { float:right; width:30px; height:35px; background:url(http://www.aspxcs.net/UploadFiles/2010/3/201003201256545110.png) right -76px no-repeat;}
.sub-item a,.sub-item span { display:block; height:22px; line-height:22px; margin-top:5px; }
.sub-item a { margin-right:8px; margin-left:6px;}
.sub-item a:hover { background:url(http://www.aspxcs.net/UploadFiles/2010/3/201003201256530350.png) -10px -130px no-repeat; }
.sub-item a:hover span { background:url(http://www.aspxcs.net/UploadFiles/2010/3/201003201256530350.png) right -152px no-repeat;}
/*active*/
#menu .active { margin-top:1px; background:url(http://www.aspxcs.net/UploadFiles/2010/3/201003201256543645.gif) right -111px no-repeat; }
#menu .active a,#menu .active a:hover { margin-top:1px; height:30px; background:url(http://www.aspxcs.net/UploadFiles/2010/3/201003201256530350.png) -10px -60px no-repeat; color:#000; }
#menu .active span,#menu .active a:hover span { height:30px; background:url(http://www.aspxcs.net/UploadFiles/2010/3/201003201256530350.png) -82px -90px no-repeat; }
.sub-item { display:none;}
#sub-item2 { display:block;}
/*IE兼容的解决*/
*+html #item a,*+html #item span,*+html .sub-item a,.sub-item span { margin-top:0;}
*+html #menu #item li a,*+html #menu .sub-item li a{ margin-top:4px; }
*+html #menu span:hover { cursor:pointer;}
* html #item a,* html #item span,* html .sub-item a,.sub-item span { margin-top:0;}
* html #menu #item li a,* html #menu .sub-item li a{ margin-top:4px; }
* html #menu span:hover { cursor:pointer;}
-->
</style>
<script type="text/javascript">
//<!--
window.onload = function() {
for( i=1; i<8; i++ ){
var nodeItem = document.getElementById("item"+i); //遍历每个菜单项增加onClick事件
nodeItem.onclick = function() {
/*菜单激活动态样式*/
for( n=0; n<7; n++){
document.getElementsByTagName("li")[n].className = "";
//alert(this.className);
}
this.className = "active";
var linkNode = parseInt( this.id.substring(4,5) );
for ( j=1; j<10; j++){ //按顺序匹配菜单项和菜单内容
var nodeSubItem = document.getElementById("sub-item"+j);
if ( linkNode == j ){ //如果菜单项和菜单内容匹配则显示，否则隐藏
nodeSubItem.style.display = "block";
}else{
nodeSubItem.style.display = "none";
}
}
}
}
}
//-->
</script>
</head>
<body>
<div id="menu">
<div id="top">
<ul id="item">
<li id="item1" class="a"><a href="#"><span>前端开发</span></a></li>
<li id="item2" class="active"><a href="#"><span>我要付款</span></a></li>
<li id="item3"><a href="#"><span>网站开发</span></a></li>
<li id="item4"><a href="#"><span>交易管理</span></a></li>
<li id="item5"><a href="#"><span>我的支付宝</span></a></li>
<li id="item6"><a href="#"><span>安全中心</span></a></li>
<li id="item7"><a href="#"><span>商家服务</span></a></li>
<li class="ext1"></li>
</ul>
</div>
<div id="bot">
<ul class="sub-item" id="sub-item1">
<li><a href="#"><span>HTML</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>JavaScript</span></a></li>
<li><a href="#"><span>ActionScript</span></a></li>
<li><a href="#"><span>Photoshop</span></a></li>
<li><a href="#"><span>Fireworks</span></a></li>
<li><a href="#"><span>Flash</span></a></li>
<li class="ext2"></li>
</ul>
<ul class="sub-item" id="sub-item2">
<li><a href="#"><span>我的支付宝</span></a></li>
<li><a href="#"><span>如何付款</span></a></li>
<li><a href="#"><span>充值吧</span></a></li>
<li><a href="#"><span>提现否</span></a></li>
<li><a href="#"><span>谁的账户</span></a></li>
<li><a href="#"><span>电话支付宝</span></a></li>
<li><a href="#"><span>手机客户端</span></a></li>
<li class="ext2"></li>
</ul>
<ul class="sub-item" id="sub-item3">
<li><a href="#"><span>前端开发</span></a></li>
<li><a href="#"><span>后台程序</span></a></li>
<li><a href="#"><span>用户体验</span></a></li>
<li><a href="#"><span>视觉设计</span></a></li>
<li><a href="#"><span>UI设计</span></a></li>
<li class="ext2"></li>
</ul>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号