jQuery仿騰訊云滑動下拉導航菜單效果
標簽： jquery
menu.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<link media="screen" rel="stylesheet" href="demo.css"/>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var qcloud={};
$('[_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>
<div class="head-v3">
<div class="navigation-up">
<div class="navigation-inner">
<div class="navigation-v3">
<ul>
<li class="" _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>
</body>
</html>demo.css
@charset "UTF-8";
html{font-size:62.5%;font-family:'helvetica neue',tahoma,arial,'hiragino sans gb','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,'hiragino sans gb','microsoft yahei','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:0 auto;width:980px;position:relative}
.navigation-up{height:60px;background:#4689f4}
.navigation-up .navigation-v3{margin-left:155px;float:left;_margin-left:10px}
.navigation-up .navigation-v3 ul{float:left}
.navigation-up .navigation-v3 li{float:left;font:normal 16px/59px "microsoft yahei";color:#fff}
.navigation-up .navigation-v3 .nav-up-selected{background:#4778c7}
.navigation-up .navigation-v3 .nav-up-selected-inpage{background:#4778c7}
.navigation-up .navigation-v3 li h2{font-weight:normal;padding:0;margin:0}
.navigation-up .navigation-v3 li h2 a{padding:0 25px;color:#fff;display:inline-block;height:60px;font-family:"microsoft yahei"}
.navigation-down{position:absolute;top:60px;left:0px;width:100%}
.navigation-down .nav-down-menu{width:100%;margin:0;background:#4778c7;position:absolute;top:0px}
.navigation-down .nav-down-menu .navigation-down-inner{margin:auto;width:1200px;position:relative}
.navigation-down .nav-down-menu dl{float:left;margin:18px 80px 18px 0}
.navigation-down .menu-1 dl{margin:20px 80px 25px 0}
.navigation-down .menu-1 dt{font:normal 16px "microsoft yahei";color:#fff;padding-bottom:10px;border-bottom:1px solid #fff;margin-bottom:10px}
.navigation-down .menu-1 dd a{color:#fff;font:normal 14px/30px "microsoft yahei"}
.navigation-down .menu-1 dd a:hover{color:#60aff6}
.navigation-down .menu-2 dd a,.navigation-down .menu-3 dd a{color:#fff;font:normal 16px "microsoft yahei"}
版權聲明：本文為yb305原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
智能推薦
freemarker + ItextRender 根據模板生成PDF文件
1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件 其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件； 還有一個問題至今沒有解決，就是關于生成PDF文件...
猜你喜歡
電腦空間不夠了？教你一個小秒招快速清理 Docker 占用的磁盤空間！
Docker 很占用空間，每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時，我們的磁盤空間會被大量占用。 如果你也被這個問題所困擾，咱們就一起看一下 Docker 是如何使用磁盤空間的，以及如何回收。 docker 占用的空間可以通過下面的命令查看： TYPE 列出了docker 使用磁盤的 4 種類型： Images：所有鏡像占用的空間，包括拉取下來的鏡像，和本地構建的。 Con...
requests實現全自動PPT模板
http://www.1ppt.com/moban/ 可以免費的下載PPT模板，當然如果要人工一個個下，還是挺麻煩的，我們可以利用requests輕松下載 訪問這個主頁，我們可以看到下面的樣式 點每一個PPT模板的圖片，我們可以進入到詳細的信息頁面，翻到下面，我們可以看到對應的下載地址 點擊這個下載的按鈕，我們便可以下載對應的PPT壓縮包 那我們就開始做吧 首先，查看網頁的源代碼，我們可以看到每一...
Linux C系統編程-線程互斥鎖（四）
互斥鎖 互斥鎖也是屬于線程之間處理同步互斥方式，有上鎖/解鎖兩種狀態。 互斥鎖函數接口 1）初始化互斥鎖 pthread_mutex_init() man 3 pthread_mutex_init (找不到的情況下首先 sudo apt-get install glibc-doc sudo apt-get install manpages-posix-dev) 動態初始化 int pthread_...
統計學習方法 - 樸素貝葉斯
引入問題：一機器在良好狀態生產合格產品幾率是 90%，在故障狀態生產合格產品幾率是 30%，機器良好的概率是 75%。若一日第一件產品是合格品，那么此日機器良好的概率是多少。 貝葉斯模型 生成模型與判別模型 判別模型，即要判斷這個東西到底是哪一類，也就是要求y，那就用給定的x去預測。 生成模型，是要生成一個模型，那就是誰根據什么生成了模型，誰就是類別y，根據的內容就是x 以上述例子，判斷一個生產出...
