设为首页收藏本站
切换到宽版

PHPIN.NET

 找回密码
 立即注册
PHPIN.NET»论坛 › 网页前端技术 › 网页综合特效 › jquery仿腾讯云下拉导航
返回列表 发新帖
查看: 7053|回复: 0

[jQuery/Js/AJAX] jquery仿腾讯云下拉导航

[复制链接]
admin

469

主题

31

回帖

5569

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5569
发表于 2014-7-1 10:08:57 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
jquery仿腾讯云下拉导航
本文关键字词：jquery，腾讯，下拉导航，滑动效果，菜单导航

jquery仿腾讯云下拉导航

jquery仿腾讯云下拉导航
源码如下：
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>jquery仿腾讯云下拉导航</title>
  6. <link media="screen" rel="stylesheet" href="demo.css"/>
  7. <style type="text/css">
  8. @charset "UTF-8";
  9. html{font-size:62.5%;font-family:'helvetica neue',tahoma,arial,'hiragino sans gb','Simsun',sans-serif}
  10. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,hr{margin:0;padding:0}
  11. body{line-height:1.333;font-size:12px}
  12. h1,h2,h3,h4,h5,h6{font-size:100%;font-family:arial,'hiragino sans gb','microsoft yahei','Simsun',sans-serif}
  13. li{list-style:none}
  14. a:link,a:visited{text-decoration:none}
  15. .head-v3{position:relative;z-index:100;min-width:1000px}
  16. .head-v3 .navigation-inner{margin:0 auto;width:980px;position:relative}
  17. .navigation-up{height:60px;background:#27303f}
  18. .navigation-up .navigation-v3{margin-left:155px;float:left;_margin-left:10px}
  19. .navigation-up .navigation-v3 ul{float:left}
  20. .navigation-up .navigation-v3 li{float:left;font:normal 16px/59px "microsoft yahei";color:#fff}
  21. .navigation-up .navigation-v3 .nav-up-selected{background:#344157}
  22. .navigation-up .navigation-v3 .nav-up-selected-inpage{background:#202833}
  23. .navigation-up .navigation-v3 li h2{font-weight:normal;padding:0;margin:0}
  24. .navigation-up .navigation-v3 li h2 a{padding:0 25px;color:#fff;display:inline-block;height:60px;font-family:"microsoft yahei"}
  25. .navigation-down{position:absolute;top:60px;left:0px;width:100%}
  26. .navigation-down .nav-down-menu{width:100%;margin:0;background:#344157;position:absolute;top:0px}
  27. .navigation-down .nav-down-menu .navigation-down-inner{margin:auto;width:1200px;position:relative}
  28. .navigation-down .nav-down-menu dl{float:left;margin:18px 80px 18px 0}
  29. .navigation-down .menu-1 dl{margin:20px 80px 25px 0}
  30. .navigation-down .menu-1 dt{font:normal 16px "microsoft yahei";color:#61789e;padding-bottom:10px;border-bottom:1px solid #61789e;margin-bottom:10px}
  31. .navigation-down .menu-1 dd a{color:#fff;font:normal 14px/30px "microsoft yahei"}
  32. .navigation-down .menu-1 dd a:hover{color:#60aff6}
  33. .navigation-down .menu-2 dd a,.navigation-down .menu-3 dd a{color:#fff;font:normal 16px "microsoft yahei"}
  34. </style>
  35. </head>
  36. <body>
  37. <div class="head-v3">
  38. <div class="navigation-up">
  39. <div class="navigation-inner">
  40. <div class="navigation-v3">
  41. <ul>
  42. <li class="nav-up-selected-inpage" _t_nav="home">
  43. <h2>
  44. <a href="/">首页</a>
  45. </h2>
  46. </li>
  47. <li class="" _t_nav="product">
  48. <h2>
  49. <a href="/?product/product.php">云产品</a>
  50. </h2>
  51. </li>
  52. <li class="" _t_nav="wechat">
  53. <h2>
  54. <a href="/">微信建站</a>
  55. </h2>
  56. </li>
  57. <li class="" _t_nav="solution">
  58. <h2>
  59. <a href="/">行业解决方案</a>
  60. </h2>
  61. </li>
  62. <li class="" _t_nav="cooperate">
  63. <h2>
  64. <a href="/?agent/agent.php">合作伙伴</a>
  65. </h2>
  66. </li>
  67. <li _t_nav="support">
  68. <h2>
  69. <a href="/?wiki.php">帮助与支持</a>
  70. </h2>
  71. </li>
  72. </ul>
  73. </div>
  74. </div>
  75. </div>
  76. <div class="navigation-down">
  77. <div id="product" class="nav-down-menu menu-1" style="display: none;" _t_nav="product">
  78. <div class="navigation-down-inner">
  79. <dl style="margin-left: 100px;">
  80. <dt>计算机与网络</dt>
  81. <dd>
  82. <a hotrep="hp.header.product.compute1" href="/?product/product.php?item=cvm">云服务器</a>
  83. </dd>
  84. <dd>
  85. <a hotrep="hp.header.product.compute2" href="/?product/product.php?item=cee">弹性Web引擎</a>
  86. </dd>
  87. <dd>
  88. <a hotrep="hp.header.product.compute3" href="/?product/product.php?item=balance">负载均衡</a>
  89. </dd>
  90. </dl>
  91. <dl>
  92. <dt>存储与CDN</dt>
  93. <dd>
  94. <a hotrep="hp.header.product.storage1" href="/?product/product.php?item=cdb">云数据库</a>
  95. </dd>
  96. <dd>
  97. <a hotrep="hp.header.product.storage2" href="/?product/product.php?item=cmem">NoSQL高速存储</a>
  98. </dd>
  99. <dd>
  100. <a hotrep="hp.header.product.storage4" href="/?product/product.php?item=cos">对象存储服务(beta)</a>
  101. </dd>
  102. <dd>
  103. <a hotrep="hp.header.product.storage3" href="/?product/product.php?item=cdn">CDN</a>
  104. </dd>
  105. </dl>
  106. <dl>
  107. <dt>监控与安全</dt>
  108. <dd>
  109. <a hotrep="hp.header.product.monitoring1" href="/?product/product.php?item=monitor">云监控</a>
  110. </dd>
  111. <dd>
  112. <a hotrep="hp.header.product.monitoring2" href="/?product/product.php?item=safe">云安全</a>
  113. </dd>
  114. <dd>
  115. <a hotrep="hp.header.product.monitoring3" href="/?product/product.php?item=cat">云拨测</a>
  116. </dd>
  117. </dl>
  118. <dl>
  119. <dt>数据分析</dt>
  120. <dd>
  121. <a hotrep="hp.header.product.analysis1" href="/?">腾讯云分析</a>
  122. </dd>
  123. <dd>
  124. <a hotrep="hp.header.product.analysis2" href="/?product/product.php?item=keyfactor">关键因子</a>
  125. </dd>
  126. </dl>
  127. <dl>
  128. <dt>开发者工具</dt>
  129. <dd>
  130. <a hotrep="hp.header.product.devtool1" href="/?product/product.php?item=mna">移动加速</a>
  131. </dd>
  132. <dd>
  133. <a hotrep="hp.header.product.devtool2" href="/?product/product.php?item=appup">应用加固</a>
  134. </dd>
  135. <dd>
  136. <a hotrep="hp.header.product.devtool3" href="/?product/product.php?item=dove">信鸽推送</a>
  137. </dd>
  138. </dl>
  139. <dl>
  140. <dt>开发者服务</dt>
  141. <dd>
  142. <a hotrep="hp.header.product.service1" href="/?special/security.php">安全认证服务</a>
  143. </dd>
  144. <dd>
  145. <a hotrep="hp.header.product.service2" href="/?">域名备案</a>
  146. </dd>
  147. </dl>
  148. </div>
  149. </div>
  150. <div id="solution" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="solution">
  151. <div class="navigation-down-inner">
  152. <dl style="margin-left: 380px;">
  153. <dd>
  154. <a class="link" hotrep="hp.header.solution.1" href="http://weixin.qcloud.com/">微信</a>
  155. </dd>
  156. </dl>
  157. <dl>
  158. <dd>
  159. <a class="link" hotrep="hp.header.solution.2" href="/?">游戏</a>
  160. </dd>
  161. </dl>
  162. <dl>
  163. <dd>
  164. <a class="link" hotrep="hp.header.solution.3" href="/">移动应用</a>
  165. </dd>
  166. </dl>
  167. </div>
  168. </div>
  169. <div id="support" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="support">
  170. <div class="navigation-down-inner">
  171. <dl style="margin-left: 610px;">
  172. <dd>
  173. <a class="link" hotrep="hp.header.support.1" href="/?wiki.php">资料库</a>
  174. </dd>
  175. </dl>
  176. <dl>
  177. <dd>
  178. <a class="link" hotrep="hp.header.support.2" href="/?forum.php">论坛</a>
  179. </dd>
  180. </dl>
  181. <dl>
  182. <dd>
  183. <a class="link" hotrep="hp.header.support.3" href="/?fuchi2014.php">亿元扶持</a>
  184. </dd>
  185. </dl>
  186. </div>
  187. </div>
  188. <div id="cooperate" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="cooperate">
  189. <div class="navigation-down-inner">
  190. <dl style="margin-left: 480px;">
  191. <dd>
  192. <a hotrep="hp.header.partner.1" href="/?agent/agent.php">代理商</a>
  193. </dd>
  194. </dl>
  195. <dl>
  196. <dd>
  197. <a hotrep="hp.header.partner.2" href="/?apply/apply.php">微信服务商</a>
  198. </dd>
  199. </dl>
  200. <dl>
  201. <dd>
  202. <a hotrep="hp.header.partner.3" href="/?special/venture.php?from=qcloud.banner">创投机构</a>
  203. </dd>
  204. </dl>
  205. </div>
  206. </div>
  207. </div>
  208. </div>
  209. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  210. <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
  211. </div>
  212. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  213. <script type="text/javascript">
  214. jQuery(document).ready(function(){
  215. var qcloud={};
  216. $('[_t_nav]').hover(function(){
  217. var _nav = $(this).attr('_t_nav');
  218. clearTimeout( qcloud[ _nav + '_timer' ] );
  219. qcloud[ _nav + '_timer' ] = setTimeout(function(){
  220. $('[_t_nav]').each(function(){
  221. $(this)[ _nav == $(this).attr('_t_nav') ? 'addClass':'removeClass' ]('nav-up-selected');
  222. });
  223. $('#'+_nav).stop(true,true).slideDown(200);
  224. }, 150);
  225. },function(){
  226. var _nav = $(this).attr('_t_nav');
  227. clearTimeout( qcloud[ _nav + '_timer' ] );
  228. qcloud[ _nav + '_timer' ] = setTimeout(function(){
  229. $('[_t_nav]').removeClass('nav-up-selected');
  230. $('#'+_nav).stop(true,true).slideUp(200);
  231. }, 150);
  232. });
  233. });
  234. </script>
  235. </body>
  236. </html>
复制代码
jquery, 腾讯, 下拉导航, 滑动效果, 菜单导航

相关帖子
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|PHPIN.NET ( 冀ICP备12000898号-14 )|网站地图

GMT+8, 2024-11-23 17:31

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表