js KISSY框架仿阿里云滑动下拉导航菜单效果代码(未整理)



85 339 114



特效描述:滑动下拉导航 菜单效果代码,阿里云菜单 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

加群请备注:从官网了解到