以下是 支付宝下拉菜单JS代码 的示例演示效果:
部分效果截图:
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=utf-8" />
<title>支付宝下拉菜单JS代码</title>
<link charset="utf-8" rel="stylesheet" href="images/zzsc.css">
<!--[if lt IE 9]>
<script type="text/javascript">
// html5shiv MIT @rem remysharp.com/html5-enabling-script
// iepp v1.6.2 MIT @jon_neal iecss.com/print-protector
/*@cc_on(function(a,b){function r(a){var b=-1;while(++b<f)a.createElement(e[b])}if(!(!window.attachEvent||!b.createStyleSheet||!function(){var a=document.createElement("div");a.innerHTML="<elem></elem>";return a.childNodes.length!==1}())){a.iepp=a.iepp||{};var c=a.iepp,d=c.html5elements||"abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",e=d.split("|"),f=e.length,g=new RegExp("(^|\\s)("+d+")","gi"),h=new RegExp("<(/*)("+d+")","gi"),i=/^\s*[\{\}]\s*$/,j=new RegExp("(^|[^\\n]*?\\s)("+d+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),k=b.createDocumentFragment(),l=b.documentElement,m=l.firstChild,n=b.createElement("body"),o=b.createElement("style"),p=/print|all/,q;c.getCSS=function(a,b){if(a+""===undefined)return"";var d=-1,e=a.length,f,g=[];while(++d<e){f=a[d];if(f.disabled)continue;b=f.media||b,p.test(b)&&g.push(c.getCSS(f.imports,b),f.cssText),b="all"}return g.join("")},c.parseCSS=function(a){var b=[],c;while((c=j.exec(a))!=null)b.push(((i.exec(c[1])?"\n":c[1])+c[2]+c[3]).replace(g,"$1.iepp_$2")+c[4]);return b.join("\n")},c.writeHTML=function(){var a=-1;q=q||b.body;while(++a<f){var c=b.getElementsByTagName(e[a]),d=c.length,g=-1;while(++g<d)c[g].className.indexOf("iepp_")<0&&(c[g].className+=" iepp_"+e[a])}k.appendChild(q),l.appendChild(n),n.className=q.className,n.id=q.id,n.innerHTML=q.innerHTML.replace(h,"<$1font")},c._beforePrint=function(){o.styleSheet.cssText=c.parseCSS(c.getCSS(b.styleSheets,"all")),c.writeHTML()},c.restoreHTML=function(){n.innerHTML="",l.removeChild(n),l.appendChild(q)},c._afterPrint=function(){c.restoreHTML(),o.styleSheet.cssText=""},r(b),r(k);if(c.disablePP)return;m.insertBefore(o,m.firstChild),o.media="print",o.className="iepp-printshim",a.attachEvent("onbeforeprint",c._beforePrint),a.attachEvent("onafterprint",c._afterPrint)}})(this,document)@*/
</script>
<![endif]-->
<!--[if IE]>
<style type="text/css">
.pic, .txt, .bg {
opacity: 1;
}
#banner .txt {
top: 50px;
left: 0;
}
#banner .pic-1, #banner .pic-2 {
left: 0;
}
#banner .pic-3 {
left: 46%;
}
</style>
<![endif]-->
</head>
<body>
<div align="center">
<header class="header" coor="header">
<div class="grid-990 header-wrap fn-clear">
<figure class="fn-left" id="alipay-img-logo">
<object width="246" height="42" id="images/zzsc.swf" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7" type="application/x-shockwave-flash">
<param name="movie" value="images/zzsc.swf">
<param name="quality" value="High">
<param name="wmode" value="opaque">
<param name="allowscriptaccess" value="always">
<embed width="246" height="42" id="images/zzsc.swf" src="images/zzsc.swf" quality="High" pluginspage="https://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="opaque" allowscriptaccess="always">
</object>
</figure>
<nav id="J-nav" role="navigation">
<ul class="nav" coor="nav">
<li class="nav-item" id="home"><a href="#/jiaoben/" class="nav-item-link" seed="#/jiaoben/" smartracker="on">首页</a></li>
<li class="nav-item" id="personal"><a href="#/jiaoben/" seed="Nav-personal" class="nav-item-link">个人服务</a>
<div class="nav-item-sub sl-shadow">
<table class="nav-item-table">
<thead>
<tr>
<th>付款收款</th>
<th>生活助手</th>
<th>网购导航</th>
<th class="last">会员账户管理</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-personal-gathering">我要付款</a></td>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-personal-jiaofei">水电煤缴费</a></td>
<td><a href="http://buy.etao.com/" target="_blank" seed="Nav-personal-bussinesslist">返利商家</a></td>
<td class="last"><a href="#/jiaoben/" target="_blank" seed="Nav-accout-manage">账户管理</a></td>
</tr>
<tr>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-personal-tocard">转账到银行卡</a></td>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-personal-mobile">手机充值</a></td>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-personal-weike">微客消费券</a></td>
<td class="last"><a href="#/jiaoben/" target="_blank" seed="Nav-accout-record">交易记录</a></td>
</tr>
<tr>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-personal-escore-gathering">担保收款</a></td>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-personal-guhua">固话宽带</a></td>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-personal-promotion">促销活动</a></td>
<td class="last"><a href="#/jiaoben/" target="_blank" seed="Nav-accout-paydirect">支付方式管理</a></td>
</tr>
<tr>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-personal-escore-pay">担保付款</a></td>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-personal-credit">信用卡还款</a></td>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-personal-overseas">海淘</a></td>
<td class="last"><a href="#/jiaoben" target="_blank" seed="Nav-vip">账户通</a></td>
</tr>
<tr>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-personal-peerpay">找人代付</a></td>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-personal-perloan">还贷款</a></td>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-etao">一淘比价</a></td>
<td class="last"><a href="#/jiaoben/" target="_blank" seed="Nav_jf">集分宝</a></td>
</tr>
<tr>
<td><a href="#/jiaoben" target="_blank" seed="Nav-personal-we">团体收款</a></td>
<td><a href="#/jiaoben" target="_blank" seed="Nav-personal-more">更多...</a></td>
<td></td>
<td class="last"><a href="#/jiaoben/" target="_blank" seed="Nav_fund">基金专户</a></td>
</tr>
</tbody>
</table>
</div>
<div class="angle sl-angle"></div>
</li>
<li class="nav-item" id="payment">
<a href="#/jiaoben/" class="nav-item-link" seed="Nav-bank">付款方式</a>
<div class="nav-item-sub sl-shadow">
<table class="nav-item-table">
<thead>
<tr>
<th>付款方式</th>
<th class="last">银行合作</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#/jiaoben" target="_blank" seed="Nav-bank-payguide">付款方式介绍</a></td>
<td class="last"><a href="#/jiaoben" target="_blank" seed="Nav-bank-cooperation">合作伙伴</a></td>
</tr>
<tr>
<td><a href="#/jiaoben/daima/" target="_blank" seed="Nav-bank-paydirect">付款方式推荐</a></td>
</tr>
</tbody>
</table>
</div>
<div class="angle sl-angle"></div>
</li>
<li class="nav-item" id="security">
<a href="#/jiaoben/" seed="Nav-safe" class="nav-item-link">安全保障</a>
<div class="nav-item-sub sl-shadow">
<table class="nav-item-table">
<tbody>
<tr>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-safe-accout">账户资金安全</a></td>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-safe-freshman">新人专区</a></td>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-safe-mobile-otp">手机宝令</a></td>
<td class="last"><a href="#/jiaoben/" target="_blank" seed="Nav-safe-browser">浏览器厂商</a></td>
</tr>
<tr>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-safe-trade">网络交易安全</a></td>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-safe-experience">买家卖家经验</a></td>
<td><a href="#/jiaoben" target="_blank" seed="Nav-safe-security">数字证书</a></td>
<td class="last"><a href="#/jiaoben/daima/" target="_blank" seed="Nav-safe-virus">杀毒厂商</a></td>
</tr>
<tr>
<td></td>
<td></td>
<td><a href="#/jiaoben/daima/" target="_blank" seed="Nav-safe-ukey">支付盾</a></td>
<td class="last"><a href="#/jiaoben/daima/" target="_blank" seed="Nav-safe-other">其他合作</a></td>
</tr>
<tr>
<td></td>
<td></td>
<td><a href="#/jiaoben/daima/" target="_blank" seed="Nav-safe-third">第三方证书</a></td>
<td class="last"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><a href="#/jiaoben/psd/" target="_blank" seed="Nav-safe-otp">宝令</a></td>
<td class="last"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><a href="#/jiaoben/daima/" target="_blank" seed="Nav-safe-mobile">手机动态口令</a></td>
<td class="last"></td>
</tr>
</tbody>
</table>
</div>
<div class="angle sl-angle"></div>
</li>
<li class="nav-item" id="business">
<a href="#/jiaoben/" seed="Nav-bussiness" class="nav-item-link">商家服务</a>
<div class="nav-item-sub sl-shadow">
<table class="nav-item-table">
<thead>
<tr>
<th>产品商店</th>
<th>技术支持</th>
<th>增值服务</th>
<th class="last">我的商家服务</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-bussiness-escore">担保交易</a></td>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-bussiness-self">商户自助集成</a></td>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-bussiness-activity">商家活动</a></td>
<td class="last"><a href="#/jiaoben/" target="_blank" seed="Nav-bussiness-myorder">我的订单</a></td>
</tr>
<tr>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-bussiness-immediately">即时到账</a></td>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-bussiness-assit">支付宝协助集成</a></td>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-bussiness-tool">营销工具</a></td>
<td class="last"><a href="#/jiaoben/" target="_blank" seed="Nav-bussiness-myproduct">我的产品</a></td>
</tr>
<tr>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-bussiness-kuai">快捷登录</a></td>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-bussiness-report">故障申报</a></td>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-bussiness-third">第三方服务</a></td>
<td class="last"><a href="#/jiaoben/" target="_blank" seed="Nav-bussiness-record">技术服务</a></td>
</tr>
<tr>
<td><a href="#/jiaoben/" target="_blank" seed="Nav-bussiness-group">团购收款</a></td>
<td></td>
<td></td>
<td class="last"><a href="#/jiaoben/" target="_blank" seed="Nav-bussiness-mycampaign">我参加的活动</a></td>
</tr>
<tr>
<td><a href="#/jiaoben/" target="_blank" seed="seed">更多...</a></td>
<td></td>
<td></td>
<td class="last"></td>
</tr>
</tbody>
</table>
</div>
<div class="angle sl-angle"></div>
</li></ul>
</nav>
</div>
</header>
<script type="text/javascript">
var adjust = null, adjustHeight = null,adjustHeightRecord = 0;
Loader.use('alipay.alipayIndexSimple.main',function(){
//导航下拉
alipay.index.nav();
});
</script>
</div>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
