jQuery仿腾讯云滑动下拉导航菜单效果代码
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metacontent="IE=edge"http-equiv="X-UA-Compatible">
<linkmedia="screen"rel="stylesheet"href="demo.css"/>
<scriptsrc="http://code.jquery.com/jquery-1.9.0.js"></script>
<scripttype="text/javascript">
jQuery(document).ready(function(){
varqcloud={};
$('[_t_nav]').hover(function(){
var_nav=$(this).attr('_t_nav');
clearTimeout(qcloud[_nav+'_timer']);
qcloud[_nav+'_timer']=setTimeout(function(){
$('[_t_nav]').each(function(){
$(this)[_nav==$(this).attr('_t_nav')?'addClass':'removeClass']('nav-up-selected');
});
$('#'+_nav).stop(true,true).slideDown(200);
},150);
},function(){
var_nav=$(this).attr('_t_nav');
clearTimeout(qcloud[_nav+'_timer']);
qcloud[_nav+'_timer']=setTimeout(function(){
$('[_t_nav]').removeClass('nav-up-selected');
$('#'+_nav).stop(true,true).slideUp(200);
},150);
});
});
</script>
</head>
<body>
<divclass="head-v3">
<divclass="navigation-up">
<divclass="navigation-inner">
<divclass="navigation-v3">
<ul>
<liclass="nav-up-selected-inpage"_t_nav="home">
<h2>
<ahref="http://www.qcloud.com">首页</a>
</h2>
</li>
<liclass=""_t_nav="product">
<h2>
<ahref="http://www.qcloud.com/product/product.php">云产品</a>
</h2>
</li>
<liclass=""_t_nav="wechat">
<h2>
<ahref="http://weixin.qcloud.com/market">微信建站</a>
</h2>
</li>
<liclass=""_t_nav="solution">
<h2>
<ahref="http://game.qcloud.com/">行业解决方案</a>
</h2>
</li>
<liclass=""_t_nav="cooperate">
<h2>
<ahref="http://www.qcloud.com/agent/agent.php">合作伙伴</a>
</h2>
</li>
<li_t_nav="support">
<h2>
<ahref="http://www.qcloud.com/wiki.php">帮助与支持</a>
</h2>
</li>
</ul>
</div>
</div>
</div>
<divclass="navigation-down">
<divid="product"class="nav-down-menumenu-1"style="display:none;"_t_nav="product">
<divclass="navigation-down-inner">
<dlstyle="margin-left:100px;">
<dt>计算机与网络</dt>
<dd>
<ahotrep="hp.header.product.compute1"href="http://www.qcloud.com/product/product.php?item=cvm">云服务器</a>
</dd>
<dd>
<ahotrep="hp.header.product.compute2"href="http://www.qcloud.com/product/product.php?item=cee">弹性Web引擎</a>
</dd>
<dd>
<ahotrep="hp.header.product.compute3"href="http://www.qcloud.com/product/product.php?item=balance">负载均衡</a>
</dd>
</dl>
<dl>
<dt>存储与CDN</dt>
<dd>
<ahotrep="hp.header.product.storage1"href="http://www.qcloud.com/product/product.php?item=cdb">云数据库</a>
</dd>
<dd>
<ahotrep="hp.header.product.storage2"href="http://www.qcloud.com/product/product.php?item=cmem">NoSQL高速存储</a>
</dd>
<dd>
<ahotrep="hp.header.product.storage4"href="http://www.qcloud.com/product/product.php?item=cos">对象存储服务(beta)</a>
</dd>
<dd>
<ahotrep="hp.header.product.storage3"href="http://www.qcloud.com/product/product.php?item=cdn">CDN</a>
</dd>
</dl>
<dl>
<dt>监控与安全</dt>
<dd>
<ahotrep="hp.header.product.monitoring1"href="http://www.qcloud.com/product/product.php?item=monitor">云监控</a>
</dd>
<dd>
<ahotrep="hp.header.product.monitoring2"href="http://www.qcloud.com/product/product.php?item=safe">云安全</a>
</dd>
<dd>
<ahotrep="hp.header.product.monitoring3"href="http://www.qcloud.com/product/product.php?item=cat">云拨测</a>
</dd>
</dl>
<dl>
<dt>数据分析</dt>
<dd>
<ahotrep="hp.header.product.analysis1"href="http://mta.qq.com/">腾讯云分析</a>
</dd>
<dd>
<ahotrep="hp.header.product.analysis2"href="http://www.qcloud.com/product/product.php?item=keyfactor">关键因子</a>
</dd>
</dl>
<dl>
<dt>开发者工具</dt>
<dd>
<ahotrep="hp.header.product.devtool1"href="http://www.qcloud.com/product/product.php?item=mna">移动加速</a>
</dd>
<dd>
<ahotrep="hp.header.product.devtool2"href="http://www.qcloud.com/product/product.php?item=appup">应用加固</a>
</dd>
<dd>
<ahotrep="hp.header.product.devtool3"href="http://www.qcloud.com/product/product.php?item=dove">信鸽推送</a>
</dd>
</dl>
<dl>
<dt>开发者服务</dt>
<dd>
<ahotrep="hp.header.product.service1"href="http://www.qcloud.com/special/security.php">安全认证服务</a>
</dd>
<dd>
<ahotrep="hp.header.product.service2"href="http://beian.qcloud.com/">域名备案</a>
</dd>
</dl>
</div>
</div>
<divid="solution"class="nav-down-menumenu-3menu-1"style="display:none;"_t_nav="solution">
<divclass="navigation-down-inner">
<dlstyle="margin-left:380px;">
<dd>
<aclass="link"hotrep="hp.header.solution.1"href="http://weixin.qcloud.com/">微信</a>
</dd>
</dl>
<dl>
<dd>
<aclass="link"hotrep="hp.header.solution.2"href="http://game.qcloud.com/">游戏</a>
</dd>
</dl>
<dl>
<dd>
<aclass="link"hotrep="hp.header.solution.3"href="http://m.qcloud.com/">移动应用</a>
</dd>
</dl>
</div>
</div>
<divid="support"class="nav-down-menumenu-3menu-1"style="display:none;"_t_nav="support">
<divclass="navigation-down-inner">
<dlstyle="margin-left:610px;">
<dd>
<aclass="link"hotrep="hp.header.support.1"href="http://www.qcloud.com/wiki.php">资料库</a>
</dd>
</dl>
<dl>
<dd>
<aclass="link"hotrep="hp.header.support.2"href="http://bbs.qcloud.com/forum.php">论坛</a>
</dd>
</dl>
<dl>
<dd>
<aclass="link"hotrep="hp.header.support.3"href="http://www.qcloud.com/fuchi2014.php">亿元扶持</a>
</dd>
</dl>
</div>
</div>
<divid="cooperate"class="nav-down-menumenu-3menu-1"style="display:none;"_t_nav="cooperate">
<divclass="navigation-down-inner">
<dlstyle="margin-left:480px;">
<dd>
<ahotrep="hp.header.partner.1"href="http://www.qcloud.com/agent/agent.php">代理商</a>
</dd>
</dl>
<dl>
<dd>
<ahotrep="hp.header.partner.2"href="http://proxy.weixin.qcloud.com/apply/apply.php">微信服务商</a>
</dd>
</dl>
<dl>
<dd>
<ahotrep="hp.header.partner.3"href="http://www.qcloud.com/special/venture.php?from=qcloud.banner">创投机构</a>
</dd>
</dl>
</div>
</div>
</div>
</div>
</body>
</html>
demo.css
@charset"UTF-8";
html{font-size:62.5%;font-family:'helveticaneue',tahoma,arial,'hiraginosansgb','Simsun',sans-serif}
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}
body{line-height:1.333;font-size:12px}
h1,h2,h3,h4,h5,h6{font-size:100%;font-family:arial,'hiraginosansgb','microsoftyahei','Simsun',sans-serif}
li{list-style:none}
a:link,a:visited{text-decoration:none}
.head-v3{position:relative;z-index:100;min-width:1000px}
.head-v3.navigation-inner{margin:0auto;width:980px;position:relative}
.navigation-up{height:60px;background:#27303f}
.navigation-up.navigation-v3{margin-left:155px;float:left;_margin-left:10px}
.navigation-up.navigation-v3ul{float:left}
.navigation-up.navigation-v3li{float:left;font:normal16px/59px"microsoftyahei";color:#fff}
.navigation-up.navigation-v3.nav-up-selected{background:#344157}
.navigation-up.navigation-v3.nav-up-selected-inpage{background:#202833}
.navigation-up.navigation-v3lih2{font-weight:normal;padding:0;margin:0}
.navigation-up.navigation-v3lih2a{padding:025px;color:#fff;display:inline-block;height:60px;font-family:"microsoftyahei"}
.navigation-down{position:absolute;top:60px;left:0px;width:100%}
.navigation-down.nav-down-menu{width:100%;margin:0;background:#344157;position:absolute;top:0px}
.navigation-down.nav-down-menu.navigation-down-inner{margin:auto;width:1200px;position:relative}
.navigation-down.nav-down-menudl{float:left;margin:18px80px18px0}
.navigation-down.menu-1dl{margin:20px80px25px0}
.navigation-down.menu-1dt{font:normal16px"microsoftyahei";color:#61789e;padding-bottom:10px;border-bottom:1pxsolid#61789e;margin-bottom:10px}
.navigation-down.menu-1dda{color:#fff;font:normal14px/30px"microsoftyahei"}
.navigation-down.menu-1dda:hover{color:#60aff6}
.navigation-down.menu-2dda,.navigation-down.menu-3dda{color:#fff;font:normal16px"microsoftyahei"}