jquery仿騰訊云滑動下拉導航菜單效果代碼



97 386 129



特效描述:仿騰訊云導航 滑動下拉導航 菜單效果代碼,一款和阿里云菜單效果一樣的菜單,但是處理方法卻大不相同。騰訊云的菜單超簡單。

代碼結構

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

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

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