jquery頂部固定層下拉導航
最近有人在論壇裡討論怎麼製作導航選單！我關注了一下，這裡就寫了一個簡單的demo。供大家參考。程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jquery頂部固定層下拉導航</title>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
html,*,body, div, ul,ol, li,h1,h2,h3,h4,h5,h6,p,span{margin:0;padding:0;}
body{font-family:"微軟雅黑", Arial, Helvetica, sans-serif;color:#666666;line-height:25px;font-size:14px;background:#f2f2f2 url(bg.gif) repeat-x left top;height:2000PX;}
img{vertical-align:middle;}
em{font-style:normal;}
a img, :link img, :visited img{border:0;}
a:link, a:visited{text-decoration:none;color:#666666;}
a:hover,a:focus{text-decoration:underline;color:#0573bd;text-decoration:none;}
ul, ul li{list-style-type:none;}
#top_bg{height:40px;width:100%;background:#333;box-shadow:1px 1px 7px #999;position:fixed;z-index:999;left:0;border-bottom:#C6C6C6 solid 1px;}
.top{width:1640px;height:40px;margin:0 auto;}
.top .logo_l{width:145px;height:40px;float:left;background:url(logo.png) no-repeat left;}
.nav_z{width:auto!important;height:40px;float:left;position:relative;z-index:999 ;}
#navul li{float:left;width:80px;height:40px;position:relative;text-align:center;line-height:40px;}
#navul li a:link, #navul li a:visited{color:#FFF;font-weight:500;letter-spacing:2px;}
#navul li ul{display:none;position:absolute;z-index:999;background:#e6e6e6;border:#c6c6c6 1px solid;border-bottom:none;left:-1px;}
#navul li ul li{display:block;width:78px;float:none;height:35px;position:relative;line-height:35px;border-bottom:#C6C6C6 1px solid;font-size:12px;overflow:hidden}
#navul li.navmoon{background:#E6E6E6;border:#C6C6C6 1px solid;width:78px;height:38px;line-height:38px;}
#navul li.navmoon a{color:#404a58;}
#navul li.navhome a:hover{color:#FCFF00;}
#navul li.navmoon ul{display:block;}
#navul li.navmoon ul a{display:block;width:78px;height:35px;line-height:35px;}
#navul li.navmoon ul a:hover{color:#0573bd;background:#FFF;}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#navul > li").not(".navhome").hover(function(){
$(this).addClass("navmoon")
},function(){
$(this).removeClass("navmoon")
});
});
(function($){
$.fn.capacityFixed = function(options) {
var opts = $.extend({},$.fn.capacityFixed.deflunt,options);
var FixedFun = function(element) {
var top = opts.top;
element.css({
"top":top
});
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: "absolute",
top: top
});
}
});
element.find(".close-ico").click(function(event){
element.remove();
event.preventDefault();
})
};
return $(this).each(function() {
FixedFun($(this));
});
};
$.fn.capacityFixed.deflunt={
right : 0,//相對於頁面寬度的右邊定位
top:0
};
})(jQuery);
</script>
</head>
<body>
<div id="top_bg">
<div class="top">
<a class="logo_l" href="/" title="返回首頁"></a>
<!--導航開始-->
<div class="nav_z">
<ul id="navul" class="cl">
<li>
<a href="#">新聞</a>
<ul>
<li><a href="#">企業文化</a></li>
<li><a href="#">企業資質</a></li>
<li><a href="#">服務團隊</a></li>
</ul>
</li>
<li>
<a href="#">視訊</a>
<ul>
<li><a href="#">企業文化</a></li>
<li><a href="#">企業資質</a></li>
<li><a href="#">服務團隊</a></li>
</ul>
</li>
<li>
<a href="#">音樂</a>
<ul>
<li><a href="#">企業文化</a></li>
<li><a href="#">企業資質</a></li>
<li><a href="#">服務團隊</a></li>
</ul>
</li>
<li>
<a href="#">圖片</a>
<ul>
<li><a href="#">企業文化</a></li>
<li><a href="#">企業資質</a></li>
<li><a href="#">服務團隊</a></li>
</ul>
</li>
<li>
<a href="#">購物</a>
<ul>
<li><a href="#">企業文化</a></li>
<li><a href="#">企業資質</a></li>
<li><a href="#">服務團隊</a></li>
</ul>
</li>
<li>
<a href="#">小說</a>
<ul>
<li><a href="#">企業文化</a></li>
<li><a href="#">企業資質</a></li>
<li><a href="#">服務團隊</a></li>
</ul>
</li>
<li>
<a href="#">社群</a>
<ul>
<li><a href="#">企業文化</a></li>
<li><a href="#">企業資質</a></li>
<li><a href="#">服務團隊</a></li>
</ul>
</li>
<li>
<a href="#">笑話</a>
<ul>
<li><a href="#">企業文化</a></li>
<li><a href="#">企業資質</a></li>
<li><a href="#">服務團隊</a></li>
</ul>
</li>
<li>
<a href="#">遊戲</a>
<ul>
<li><a href="#">企業文化</a></li>
<li><a href="#">企業資質</a></li>
<li><a href="#">服務團隊</a></li>
</ul>
</li>
<li>
<a href="#">更多</a>
<ul>
<li><a href="#">企業文化</a></li>
<li><a href="#">企業資質</a></li>
<li><a href="#">服務團隊</a></li>
</ul>
</li>
<!--可在此處直接新增導航-->
</ul>
</div><!--導航結束-->
<script type="text/javascript">
$(".navbg").capacityFixed();
</script>
</div>
<div style="text-align:center;margin:350px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>如有不懂，請加qq群：135430763共同學習！ </p>
<p><a href="http://download.csdn.net/download/xmt1139057136/8547089">完整例子下載</a></p>
</div>
</div>
</body>
</html>
如有不懂，請加qq群：135430763共同學習！
完整demo下載地址：http://download.csdn.net/download/xmt1139057136/8547089
相關文章
- 固定在頂部的導航選單
- flutter 自定義tab導航-頂部導航-底部導航Flutter
- jQuery 淡入淡出效果下拉導航選單jQuery
- jQuery 緩衝效果二級導航下拉選單jQuery
- jQuery實現吸頂動畫導航欄jQuery動畫
- jQuery之回到頂部jQuery
- jquery-滑鼠經過導航條，顯示二級下拉選單jQuery
- uni-app動態修改頂部導航欄標題APP
- jQuery文字從頂部掉落效果jQuery
- CSS導航欄及下拉選單CSS
- JavaScript slide下拉導航選單效果JavaScriptIDE
- 導航選單（動畫）--- jQuery動畫jQuery
- 成品直播原始碼，頂部導航欄部分支援左右滑動原始碼
- 寫一個佈局，當頁面滾動一定高時，導航始終固定在頂部，反之恢復原位
- 純css製作導航下拉選單CSS
- TesterHome 首頁頂部的導航箭頭點選沒什麼效果
- CSS三級下拉導航選單詳解CSS
- JavaScript下拉摺疊導航選單講解JavaScript
- 滑鼠懸浮緩慢下拉導航選單
- 社群的下拉導航可以做成 a 標籤嗎
- CSS學習案例（14）：下拉導航選單CSS
- jquery經典例項之回到頂部jQuery
- 短視訊app製作，去除當前自帶的頂部導航欄APP
- jQuery三級導航選單詳解jQuery
- 二級下拉導航選單製作詳解
- Dcat-admin重寫頂部右側下拉選單
- 直播app開發，滑動式的頂部導航欄（左右橫向滑動）APP
- 當頂部導航欄遮擋住連結物件部分內容怎麼辦物件
- CSS3動畫效果下拉導航選單效果CSSS3動畫
- jq+css+html打造下拉導航選單例項CSSHTML單例
- 根據瀏覽器的滑動條 固定導航欄瀏覽器
- 當滑鼠滾動到指定位置，選單固定在頂部
- 透明層滑動跟隨導航選單
- Laravel 框架中某個狀態的資料固定在列表頂部Laravel框架
- 短視訊直播原始碼，實現頂部導航欄背景圖片漸隱漸現效果原始碼
- JavaScript實現HTML導航欄下拉選單[懸浮顯示]JavaScriptHTML
- jQuery頂部帶有選項卡的焦點圖效果jQuery
- 網站返回頂部jquery js實現程式碼方式案例網站jQueryJS
- vscode開啟關閉編輯區域頂部固定區域 頂部有一段行數距離高度 StickyScrollVSCode