jQuery實現側邊導航欄效果

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery常見問題 >> jQuery實現側邊導航欄效果

jQuery實現側邊導航欄效果

編輯：JQuery常見問題

效果圖：

效果體驗：http:///keleyi/phtml/jqmenu/2.htm

淡入版本體驗：http:///keleyi/phtml/jqmenu/2a.htm
如果一個菜單已經展開了，下一個菜單的出現效果改為淡入。

在淡入版本基礎上，修復了菜單列表過長時一些菜單無法看到的問題：http:///keleyi/phtml/jqmenu/2b.htm

第四個版本,在第三個版本的基礎上增加了滾動條的樣式自定義。：http:///keleyi/phtml/jqmenu/2c.htm

以下是完整代碼：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代碼,側邊菜單,拉出菜單,高級菜單,導航菜單,jquery菜單" />
<meta name="description" content="jQuery高級可停靠側邊欄，jquery實現的高級側邊導航菜單效果，更多側邊菜單,拉出菜單,高級菜單,導航菜單,jquery菜單請訪問JS代碼頻道。" />
<title>jQuery高級可停靠側邊欄_</title>
<link type="text/css" rel="Stylesheet" href="http:///keleyi/phtml/jqmenu/2/keleyidock.css" />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var docked = 0;

$("#dock li ul").height($(window).height());

$("#dock .dock-keleyi-com").click(function () {
$(this).parent().parent().addClass("docked").removeClass("free");

docked += 1;
var dockH = ($(window).height()) / docked
var dockT = 0;

$("#dock li ul.docked").each(function () {
$(this).height(dockH).css("top", dockT + "px");
dockT += dockH;
});
$(this).parent().find(".undock").show();
$(this).hide();

if (docked > 0)
$("#content").css("margin-left", "250px");
else
$("#content").css("margin-left", "60px");
});

$("#dock .undock").click(function () {
$(this).parent().parent().addClass("free").removeClass("docked")
.animate({ left: "-180px" }, 200).height($(window).height()).css("top", "0px");

docked = docked - 1;
var dockH = ($(window).height()) / docked
var dockT = 0;

$("#dock li ul.docked").each(function () {
$(this).height(dockH).css("top", dockT + "px");
dockT += dockH;
});
$(this).parent().find(".dock-keleyi-com").show();
$(this).hide();

if (docked > 0)
$("#content").css("margin-left", "250px");
else
$("#content").css("margin-left", "60px");
});

$("#dock li").hover(function () {
$(this).find("ul").animate({ left: "40px" }, 200);
}, function () {
$(this).find("ul.free").animate({ left: "-180px" }, 200);
});
});
</script>
</head>
<body>
<ul id="dock">
<li id="links">
<ul class="free">
<li class="header"><a href="#" class="dock-keleyi-com">固定</a><a href="#" class="undock">隱藏</a>鏈接</li>
<li><a href="http:///menu/cms/" >CMS</a></li><li><a href="http:///menu/net/" >.NET</a></li><li><a href="http:///menu/javascript/" >Javascript</a></li><li><a href="http:///menu/jquery/" >jQuery</a></li><li><a href="http:///menu/csharp/" >C#</a></li><li><a href="http:///menu/aspnet/" >ASP.NET</a></li><li><a href="http:///menu/mvc/" >MVC</a></li><li><a href="http:///menu/html5/" >HTML5</a></li>
<li><a href="http:///menu/webqd/" >web前端</a></li><li><a href="http:///menu/sqlserver/" >SQL Server</a></li><li><a href="http:///menu/cpp/" >C++</a></li><li><a href="http:///menu/hbyy/" >匯編語言</a></li><li><a href="http:///menu/flhz/" >分類匯總</a></li><li><a href="http:///menu/other/" >其他</a></li><li><a href="http:///list/">最新文章</a></li><li><a href="http:///ziliao/js/zzbds.htm">JS正則表達式</a></li>
</ul>
</li>
<li id="files">
<ul class="free">
<li class="header"><a href="#" class="dock-keleyi-com">固定</a><a href="#" class="undock">隱藏</a>游戲</li>
<li><a href="http:///game/1/">HTML5捕魚游戲</a></li>
<li><a href="http:///game/2/">不上不下</a></li>
<li><a href="http:///game/3/">打地鼠</a></li>
<li><a href="http:///keleyi/phtml/silverlight/">猜數字</a></li>
<li></li>
</ul>
</li>
<li id="tools">
<ul class="free">
<li class="header"><a href="#" class="dock-keleyi-com">固定</a><a href="#" class="undock">隱藏</a>工具</li>
<li><a href="http:///tool/md5.htm">MD5加密</a></li>
<li><a href="http:///tool/htmlencode.htm" target="_blank">HTML編碼與解碼</a></li>
<li><a href="http:///tool/urldecode.htm" target="_blank">URL編碼與解碼</a></li>
<li><a href="http:///tool/regex.htm" target="_blank">.NET正則表達式匹配工具</a></li>
<li><a href="http:///ziliao/googlejavascriptstyle.htm">JavaScript代碼風格指南</a></li>
<li><a href="http:///ziliao/unicode/">Unicode字符列表</a></li>
<li><a href="http:///tool/color.htm" target="_blank" title="顏色選擇器"><img src="http:///tool/color/colormap_80.gif" alt="顏色選擇器" /></a></li>
</ul>
</li>
</ul>
<div id="content">
<h1></h1>
<h2>jQuery高級可停靠側邊欄</h2>
<p>
把光標移動到左側按鈕上，相應的側邊欄會自動彈出。
</p>
<p>
當光標離開欄目區域時，側邊欄自動隱藏。
</p>
<p>
側邊欄彈出時，點擊“固定”鏈接可以使相應的欄目固定，不自動隱藏。
</p>
<p>
點擊“隱藏”鏈接可以是相應欄目隱藏。
</p>
<p>
原文：<a href="http:///a/bjac/mt97p5y9.htm" target="_blank">http:///a/bjac/mt97p5y9.htm</a>
</p>
</div>

<div style="text-align:center;clear:both">
<p>來源：<a href="http://" target="_blank">網絡</a>　代碼整理：<a href="http://" target="_blank"></a>　感謝：<a href="http://" target="_blank">keleyi</a></p>
<p>轉載請注明出處，此代碼僅供學習交流，請勿用於商業用途。</p>
</div>
</body>
</html>

側邊欄匯總：http:///a/bjac/lt4rmbjl.htm

JQuery常見問題

高效jquery之精簡javascript: 一般來說,最好盡可能合並函數。// 糟糕$first.click(function(){ $f
jQuery實現頁面內錨點平滑跳轉: 平時我們做導航滾動到內容都是通過錨點來做，刷的一下就直接跳到內容了，沒有一絲的滾動效果，而且 url
jquery方法中的this和$(this): this，編程的人都知道this表示上下文所處的這個對象。簡單的說，在jquery方法中，this是

jQuery基礎知識 JQuery入門技巧 JQuery特效代碼 JQuery常見問題

小編推薦

browser.opera 為空或不是對象 jquery右下角自動彈出關閉層 jQuery組合鍵實現 getElementsByTagName的jquery寫法 jq動態彈出下拉導航菜單 jquery 中的 $(“#”) 與 js中的document.getElementById(“”) 的區別 jQuery.now()函數介紹 jquery樹形菜單內容滾動jquery插件myslider jQuery 選擇器

DIV CSS 佈局教程網

相關文章