您的位置：首页 > 其它

实现支付宝经典导航条效果

2010-06-01 10:50 351 查看
实现支付宝经典导航条效果

代码

<!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")
.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>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航