js KISSY框架仿阿里云滑動下拉導航菜單效果代碼(未整理)



92 364 122



特效描述:滑動下拉導航 菜單效果代碼,阿里云菜單 jQuery KISSY框架

代碼結構

1. 引入CSS

<link style="text/css" rel="stylesheet" href="css/com.css">

2. 引入JS

<script src="http://g.tbcdn.cn/kissy/k/1.4.3/seed-min.js" data-config="{combine:true}"></script>
<script type="text/javascript" src="js/header.js"></script>

3. HTML代碼

	<header>
		<div id="J_Headerwrap" class="header-wrap" data-spm="2">
			<div class="header-inner y-row">
				<div class="y-span9">
					<a id="J_logo" class="logo" data-ga="導航.主體.易云" href="http://www.china-ops.com"> <span class="icon-logo logo"></span></a>
					<nav id="J_Nav">
						<ul id="J_Menu">
							<li class="nav-1" data-menu="sub_menu_1" data-case="one">
								<h2>產品服務</h2>
							</li>
							<li class="nav-2" data-menu="sub_menu_2" data-case="one">
								<h2>解決方案</h2>
							</li>
							<li class="nav-3" data-menu="sub_menu_3" data-case="one">
								<h2>幫助支持</h2>
							</li>
							<li class="nav-4" data-menu="sub_menu_4" data-case="two">
								<h2>關于我們</h2>
							</li>
							<li class="nav-5" data-menu="sub_menu_5" data-case="one">
								<h2>案例與支持</h2>
							</li>
							<li class="nav-6" data-menu="sub_menu_6" data-case="two">
								<h2>論壇</h2>
							</li>
							<li class="nav-7" data-menu="sub_menu_7" data-case="three">
								<h2>我的阿里云</h2>
							</li>
							<!--  -->
						</ul>
					</nav>
				</div>
			</div>
		</div>
		<div id="J_subMenus" class="sub-menus" style="top: 99px;" data-spm="201">
			<div id="sub_menu_1" class="sub-menu">
				<dl class="first" style="margin-left: 95.5px;">
					<dt>彈性計算</dt>
					<dd>
						<a data-ga="導航.產品服務.ECS" href="http://www.aliyun.com/product/ecs/">云服務器ECS</a>
					</dd>
					<dd>
						<a data-ga="導航.產品服務.SLB" href="http://www.aliyun.com/product/slb/">負載均衡SLB</a>
					</dd>
				</dl>
				<dl>
					<dt>數據存儲?計算</dt>
					<dd>
						<a data-ga="導航.產品服務.RDS" href="http://www.aliyun.com/product/rds/">關系型數據庫服務RDS</a>
					</dd>
					<dd>
						<a data-ga="導航.產品服務.OSS" href="http://www.aliyun.com/product/oss/">開放存儲服務OSS</a>
					</dd>
					<dd>
						<a data-ga="導航.產品服務.CDN" href="http://www.aliyun.com/product/cdn/">內容分發網絡CDN</a>
					</dd>
					<dd>
						<a data-ga="導航.產品服務.OTS" href="http://www.aliyun.com/product/ots/">開放結構化數據服務OTS</a>
					</dd>
					<dd>
						<a data-ga="導航.產品服務.OCS" href="http://www.aliyun.com/product/ocs/">開放緩存服務OCS</a>
					</dd>
					<dd>
						<a data-ga="導航.產品服務.ODPS" href="http://www.aliyun.com/product/odps/">開放數據處理服務ODPS</a>
					</dd>
					<dd>
						<a data-ga="導航.產品服務.SLS" href="http://www.aliyun.com/product/sls/">簡單日志服務SLS</a>
					</dd>
				</dl>
				<dl>
					<dt>云引擎</dt>
					<dd>
						<a data-ga="導航.產品服務.ACE" href="http://www.aliyun.com/product/ace/">云引擎ACE</a>
					</dd>
				</dl>
				<dl>
					<dt>安全與監控</dt>
					<dd>
						<a data-ga="導航.產品服務.云盾" href="http://www.aliyun.com/product/yundun/">云盾</a>
					</dd>
					<dd>
						<a data-ga="導航.產品服務.云監控" href="http://www.aliyun.com/product/jiankong/">云監控</a>
					</dd>
				</dl>
				<dl>
					<dt>其他</dt>
					<dd>
						<a data-ga="導航.產品服務.域名注冊" target="_blank" href="http://www.net.cn/domain/">域名注冊</a>
					</dd>
					<dd>
						<a data-ga="導航.產品服務.阿里云解析" target="_blank" href="http://dns.www.net.cn/">阿里云解析</a>
					</dd>
					<dd>
						<a data-ga="導航.產品服務.輕云主機" target="_blank" href="http://www.net.cn/hosting/lightcloud/">輕云服務器</a>
					</dd>
					<dd>
						<a data-ga="導航.產品服務.云虛擬主機" target="_blank" href="http://www.net.cn/hosting/virtualhost/">云虛擬主機</a>
					</dd>
					<dd>
						<a data-ga="導航.產品服務.云郵箱" target="_blank" href="http://www.net.cn/mail/">云郵箱</a>
					</dd>
				</dl>
			</div>
			<div id="sub_menu_2" class="sub-menu">
				<dl class="first" style="margin-left: 187.5px;">
					<dd>
						<a data-ga="導航.行業云.移動云" href="http://appcloud.aliyun.com/">移動云</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a data-ga="導航.行業云.游戲云" href="http://game.aliyun.com/">游戲云</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a data-ga="導航.行業云.金融云" href="http://jr.aliyun.com/">金融云</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a data-ga="導航.行業云.電商云" target="_blank" href="http://cloud.tmall.com/index.htm?">電商云</a>
					</dd>
				</dl>
			</div>
			<div id="sub_menu_3" class="sub-menu">
				<dl class="first" style="margin-left: 263.5px;">
					<dt>鏡像</dt>
					<dd>
						<a data-ga="導航.工具與鏡像.基礎環境" href="http://market.aliyun.com/imageproduct/15-122106002.html">基礎環境</a>
					</dd>
					<dd>
						<a data-ga="導航.工具與鏡像.控制面板" href="http://market.aliyun.com/imageproduct/15-122386002.html">控制面板</a>
					</dd>
					<dd>
						<a data-ga="導航.工具與鏡像.建站系統" href="http://market.aliyun.com/imageproduct/15-122358002.html">建站系統</a>
					</dd>
				</dl>
				<dl>
					<dt>工具</dt>
					<dd>
						<a data-ga="導航.工具與鏡像.可視化管理" href="http://market.aliyun.com/product_list/12-121590002.html">可視化管理</a>
					</dd>
					<dd>
						<a data-ga="導航.工具與鏡像.安全及監控" href="http://market.aliyun.com/product_list/12-122338006.html">安全及監控</a>
					</dd>
					<dd>
						<a data-ga="導航.工具與鏡像.測試工具" href="http://market.aliyun.com/product_list/12-122326004.html">測試工具</a>
					</dd>
				</dl>
				<dl>
					<dt>運維服務</dt>
					<dd>
						<a data-ga="導航.工具與鏡像.數據遷移" href="http://market.aliyun.com/product_list/13-121568002.html">數據遷移</a>
					</dd>
					<dd>
						<a data-ga="導航.工具與鏡像.環境配置" href="http://market.aliyun.com/product_list/13-121578001.html">環境配置</a>
					</dd>
					<dd>
						<a data-ga="導航.工具與鏡像.故障排查" href="http://market.aliyun.com/product_list/13-121562003.html">故障排查</a>
					</dd>
					<dd>
						<a data-ga="導航.工具與鏡像.安全代維" href="http://market.aliyun.com/product_list/13-121580001.html">安全代維</a>
					</dd>
				</dl>
			</div>
			<div id="sub_menu_4" class="sub-menu">
				<dl class="first" style="margin-left: 311.5px;">
					<dt>合作伙伴聯盟</dt>
					<dd>
						<a data-ga="導航.合作伙伴聯盟.合作伙伴體系" href="http://partner.aliyun.com/union.html">合作伙伴體系</a>
					</dd>
				</dl>
				<dl>
					<dt>合作伙伴展示</dt>
					<dd>
						<a data-ga="導航.合作伙伴展示.商業軟件開發商" href="http://partner.aliyun.com/list-business.html">商業軟件開發商</a>
					</dd>
					<dd>
						<a data-ga="導航.合作伙伴展示.系統集成商" href="http://partner.aliyun.com/list-system.html">系統集成商</a>
					</dd>
					<dd>
						<a data-ga="導航.合作伙伴展示.解決方案提供商" href="http://partner.aliyun.com/list-solutions.html">解決方案提供商</a>
					</dd>
					<dd>
						<a data-ga="導航.合作伙伴展示.成功案例" href="http://partner.aliyun.com/list-success.html">成功案例</a>
					</dd>
				</dl>
				<dl>
					<dt>市場動態</dt>
					<dd>
						<a data-ga="導航.市場動態.動態&活動" href="http://partner.aliyun.com/activity.html">動態&活動</a>
					</dd>
					<dd>
						<a data-ga="導航.市場動態.電子期刊" href="http://partner.aliyun.com/journal.html">電子期刊</a>
					</dd>
				</dl>
				<dl>
					<dt>授權服務中心</dt>
					<dd>
						<a data-ga="導航.合作伙伴.授權服務中心" href="http://partner.aliyun.com/authorize.html">授權服務中心</a>
					</dd>
				</dl>
				<dl>
					<dt>加入我們</dt>
					<dd>
						<a data-ga="導航.合作伙伴.加入我們" href="http://partner.aliyun.com">加入我們</a>
					</dd>
				</dl>
			</div>
		<!-- 	-->
			<div id="sub_menu_5" class="sub-menu">
				<dl class="first" style="margin-left: 663.5px;">
					<dt>新手專區</dt>
					<dd>
						<a data-ga="導航.新手專區.新手專區" href="http://promotion.aliyun.com/act/xszq.html">新手學堂</a>
					</dd>
					<dd>
						<a data-ga="導航.新手專區.試用中心" href="http://try.aliyun.com/">試用中心</a>
					</dd>
					<dd>
						<a data-ga="導航.新手專區.金牌服務" target="_blank" href="http://promotion.aliyun.com/act/jpfw.html">金牌服務</a>
					</dd>
				</dl>
				<dl>
					<dt>幫助中心</dt>
					<dd>
						<a target="_blank" data-ga="導航.幫助中心.幫助中心首頁" href="http://help.aliyun.com">幫助中心首頁</a>
					</dd>
					<dd>
						<a target="_blank" data-ga="導航.幫助中心.幫助大全" href="http://help.aliyun.com/all">幫助大全</a>
					</dd>
					<dd>
						<a target="_blank" data-ga="導航.幫助中心.產品文檔" href="http://help.aliyun.com/doc/all/11112743.html">產品文檔</a>
					</dd>
				</dl>
				<dl>
					<dt>云染夢想</dt>
					<dd>
						<a data-ga="導航.云染夢想.客戶案例" href="http://www.aliyun.com/customer/">客戶案例</a>
					</dd>
					<dd>
						<a data-ga="導航.云染夢想.云夢想墻" href="http://promotion.aliyun.com/act/logo/">云夢想墻</a>
					</dd>
				</dl>
				<dl>
					<dt>產品博客</dt>
					<dd>
						<a data-ga="導航.產品博客.博客首頁" target="_blank" href="http://blog.aliyun.com/">博客首頁</a>
					</dd>
				</dl>
			</div>
			<div id="sub_menu_6" class="sub-menu">
				<dl class="first" style="margin-left: 311.5px;">
					<dd>
						<a data-ga="導航.論壇.論壇首頁" href="http://bbs.aliyun.com/">論壇首頁</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a data-ga="導航.論壇.云服務器" href="http://bbs.aliyun.com/thread/207.html">云服務器</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a data-ga="導航.論壇.負載均衡" href="http://bbs.aliyun.com/thread/208.html">負載均衡</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a data-ga="導航.論壇.關系型數據庫" href="http://bbs.aliyun.com/thread/210.html">關系型數據庫</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a data-ga="導航.論壇.備案服務" href="http://bbs.aliyun.com/thread/218.html">備案</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a data-ga="導航.論壇.域名服務" href="http://bbs.aliyun.com/thread/217.html">域名</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a data-ga="導航.論壇.云安全" href="http://bbs.aliyun.com/thread/215.html">云安全</a>
					</dd>
				</dl>
			</div>
			<div id="sub_menu_7" class="sub-menu">
				<dl class="first" style="margin-left: 621.5px;">
					<dd>
						<a rel="nofollow" data-ga="導航.我的阿里云.管理控制臺" target="_blank" href="http://console.aliyun.com/">管理控制臺</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a rel="nofollow" data-ga="導航.我的阿里云.用戶中心" target="_blank" href="http://i.aliyun.com/">用戶中心</a>
					</dd>
				</dl>
			</div>
		</div>
	</header>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊
admin
關注
TA的相關作品 >>更多
熱搜關鍵詞
熱門下載


熱門標簽:
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表