jquery仿腾讯云滑动下拉导航菜单效果代码



94 375 126



特效描述:仿腾讯云导航 滑动下拉导航 菜单效果代码,一款和阿里云菜单效果一样的菜单,但是处理方法却大不相同。腾讯云的菜单超简单。

代码结构

1. 引入CSS

<link media="screen" rel="stylesheet" href="demo.css"/>

2. 引入JS

<script src="jquery-1.7.1.min.js" type="text/javascript"></script>

3. HTML代码

<div class="head-v3">
	<div class="navigation-up">
		<div class="navigation-inner">
			<div class="navigation-v3">
				<ul>
					<li class="nav-up-selected-inpage" _t_nav="home">
						<h2>
							<a href="http://www.qcloud.com">首页</a>
						</h2>
					</li>
					<li class="" _t_nav="product">
						<h2>
							<a href="http://www.qcloud.com/product/product.php">云产品</a>
						</h2>
					</li>
					<li class="" _t_nav="wechat">
						<h2>
							<a href="http://weixin.qcloud.com/market">微信建站</a>
						</h2>
					</li>
					<li class="" _t_nav="solution">
						<h2>
							<a href="http://game.qcloud.com/">行业解决方案</a>
						</h2>
					</li>
					<li class="" _t_nav="cooperate">
						<h2>
							<a href="http://www.qcloud.com/agent/agent.php">合作伙伴</a>
						</h2>
					</li>
					<li _t_nav="support">
						<h2>
							<a href="http://www.qcloud.com/wiki.php">帮助与支持</a>
						</h2>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="navigation-down">
		<div id="product" class="nav-down-menu menu-1" style="display: none;" _t_nav="product">
			<div class="navigation-down-inner">
				<dl style="margin-left: 100px;">
					<dt>计算机与网络</dt>
					<dd>
						<a hotrep="hp.header.product.compute1" href="http://www.qcloud.com/product/product.php?item=cvm">云服务器</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.compute2" href="http://www.qcloud.com/product/product.php?item=cee">弹性Web引擎</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.compute3" href="http://www.qcloud.com/product/product.php?item=balance">负载均衡</a>
					</dd>
				</dl>
				<dl>
					<dt>存储与CDN</dt>
					<dd>
						<a hotrep="hp.header.product.storage1" href="http://www.qcloud.com/product/product.php?item=cdb">云数据库</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.storage2" href="http://www.qcloud.com/product/product.php?item=cmem">NoSQL高速存储</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.storage4" href="http://www.qcloud.com/product/product.php?item=cos">对象存储服务(beta)</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.storage3" href="http://www.qcloud.com/product/product.php?item=cdn">CDN</a>
					</dd>
				</dl>
				<dl>
					<dt>监控与安全</dt>
					<dd>
						<a hotrep="hp.header.product.monitoring1" href="http://www.qcloud.com/product/product.php?item=monitor">云监控</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.monitoring2" href="http://www.qcloud.com/product/product.php?item=safe">云安全</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.monitoring3" href="http://www.qcloud.com/product/product.php?item=cat">云拨测</a>
					</dd>
				</dl>
				<dl>
					<dt>数据分析</dt>
					<dd>
						<a hotrep="hp.header.product.analysis1" href="http://mta.qq.com/">腾讯云分析</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.analysis2" href="http://www.qcloud.com/product/product.php?item=keyfactor">关键因子</a>
					</dd>
				</dl>
				<dl>
					<dt>开发者工具</dt>
					<dd>
						<a hotrep="hp.header.product.devtool1" href="http://www.qcloud.com/product/product.php?item=mna">移动加速</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.devtool2" href="http://www.qcloud.com/product/product.php?item=appup">应用加固</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.devtool3" href="http://www.qcloud.com/product/product.php?item=dove">信鸽推送</a>
					</dd>
				</dl>
				<dl>
					<dt>开发者服务</dt>
					<dd>
						<a hotrep="hp.header.product.service1" href="http://www.qcloud.com/special/security.php">安全认证服务</a>
					</dd>
					<dd>
						<a hotrep="hp.header.product.service2" href="http://beian.qcloud.com/">域名备案</a>
					</dd>
				</dl>
			</div>
		</div>
		<div id="solution" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="solution">
			<div class="navigation-down-inner">
				<dl style="margin-left: 380px;">
					<dd>
						<a class="link" hotrep="hp.header.solution.1" href="http://weixin.qcloud.com/">微信</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a class="link" hotrep="hp.header.solution.2" href="http://game.qcloud.com/">游戏</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a class="link" hotrep="hp.header.solution.3" href="http://m.qcloud.com/">移动应用</a>
					</dd>
				</dl>
			</div>
		</div>
		<div id="support" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="support">
			<div class="navigation-down-inner">
				<dl style="margin-left: 610px;">
					<dd>
						<a class="link" hotrep="hp.header.support.1" href="http://www.qcloud.com/wiki.php">资料库</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a class="link" hotrep="hp.header.support.2" href="http://bbs.qcloud.com/forum.php">论坛</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a class="link" hotrep="hp.header.support.3" href="http://www.qcloud.com/fuchi2014.php">亿元扶持</a>
					</dd>
				</dl>
			</div>
		</div>
		<div id="cooperate" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="cooperate">
			<div class="navigation-down-inner">
				<dl style="margin-left: 480px;">
					<dd>
						<a hotrep="hp.header.partner.1" href="http://www.qcloud.com/agent/agent.php">代理商</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a hotrep="hp.header.partner.2" href="http://proxy.weixin.qcloud.com/apply/apply.php">微信服务商</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a hotrep="hp.header.partner.3" href="http://www.qcloud.com/special/venture.php?from=qcloud.banner">创投机构</a>
					</dd>
				</dl>
			</div>
		</div>
	</div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
admin
关注
TA的相关作品 >>更多
热搜关键词
热门下载


热门标签:

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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