jQuery實現側邊導航欄效果

06-15

以下是完整代碼：

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="keywords" content="JS代碼,側邊菜單,拉出菜單,高級菜單,導航菜單,jquery菜單" /> 6 <meta name="description" content="jQuery高級可停靠側邊欄，jquery實現的高級側邊導航菜單效果，更多側邊菜單,拉出菜單,高級菜單,導航菜單,jquery菜單請訪問柯樂義JS代碼頻道。" /> 7 <title>jQuery高級可停靠側邊欄_柯樂義</title> 8 <link type="text/css" rel="Stylesheet" href="http://keleyi.com/keleyi/phtml/jqmenu/2/keleyidock.css" /> 9 <script type="text/javascript" src="https://www.getit01.com/getimg_360.php?url=http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> 10 <script type="text/javascript"> 11 $(document).ready(function () { 12 var docked = 0; 13 14 $("#dock li ul").height($(window).height()); 15 16 $("#dock .dock-keleyi-com").click(function () { 17 $(this).parent().parent().addClass("docked").removeClass("free"); 18 19 docked += 1; 20 var dockH = ($(window).height()) / docked 21 var dockT = 0; 22 23 $("#dock li ul.docked").each(function () { 24 $(this).height(dockH).css("top", dockT + "px"); 25 dockT += dockH; 26 }); 27 $(this).parent().find(".undock").show(); 28 $(this).hide(); 29 30 if (docked > 0) 31 $("#content").css("margin-left", "250px"); 32 else 33 $("#content").css("margin-left", "60px"); 34 }); 35 36 $("#dock .undock").click(function () { 37 $(this).parent().parent().addClass("free").removeClass("docked") 38 .animate({ left: "-180px" }, 200).height($(window).height()).css("top", "0px"); 39 40 docked = docked - 1; 41 var dockH = ($(window).height()) / docked 42 var dockT = 0; 43 44 $("#dock li ul.docked").each(function () { 45 $(this).height(dockH).css("top", dockT + "px"); 46 dockT += dockH; 47 }); 48 $(this).parent().find(".dock-keleyi-com").show(); 49 $(this).hide(); 50 51 if (docked > 0) 52 $("#content").css("margin-left", "250px"); 53 else 54 $("#content").css("margin-left", "60px"); 55 }); 56 57 $("#dock li").hover(function () { 58 $(this).find("ul").animate({ left: "40px" }, 200); 59 }, function () { 60 $(this).find("ul.free").animate({ left: "-180px" }, 200); 61 }); 62 }); 63 </script> 64 </head> 65 <body> 66 <ul id="dock"> 67 <li id="links"> 68 <ul class="free"> 69 <li class="header"><a href="#" class="dock-keleyi-com">固定</a><a href="#" class="undock">隱藏</a>鏈接</li> 70 <li><a href="http://keleyi.com/menu/cms/" >CMS</a></li><li><a href="http://keleyi.com/menu/net/" >.NET</a></li><li><a href="http://keleyi.com/menu/javascript/" >Javascript</a></li><li><a href="http://keleyi.com/menu/jquery/" >jQuery</a></li><li><a href="http://keleyi.com/menu/csharp/" >C#</a></li><li><a href="http://keleyi.com/menu/aspnet/" >ASP.NET</a></li><li><a href="http://keleyi.com/menu/mvc/" >MVC</a></li><li><a href="http://keleyi.com/menu/html5/" >HTML5</a></li> 71 <li><a href="http://keleyi.com/menu/webqd/" >web前端</a></li><li><a href="http://keleyi.com/menu/sqlserver/" >SQL Server</a></li><li><a href="http://keleyi.com/menu/cpp/" >C++</a></li><li><a href="http://keleyi.com/menu/hbyy/" >彙編語言</a></li><li><a href="http://keleyi.com/menu/flhz/" >分類匯總</a></li><li><a href="http://keleyi.com/menu/other/" >其他</a></li><li><a href="http://keleyi.com/list/">最新文章</a></li><li><a href="http://keleyi.com/ziliao/js/zzbds.htm">JS正則表達式</a></li> 72 </ul> 73 </li> 74 <li id="files"> 75 <ul class="free"> 76 <li class="header"><a href="#" class="dock-keleyi-com">固定</a><a href="#" class="undock">隱藏</a>遊戲</li> 77 <li><a href="http://keleyi.com/game/1/">HTML5捕魚遊戲</a></li> 78 <li><a href="http://keleyi.com/game/2/">不上不下</a></li> 79 <li><a href="http://keleyi.com/game/3/">打地鼠</a></li> 80 <li><a href="http://keleyi.com/keleyi/phtml/silverlight/">猜數字</a></li> 81 <li></li> 82 </ul> 83 </li> 84 <li id="tools"> 85 <ul class="free"> 86 <li class="header"><a href="#" class="dock-keleyi-com">固定</a><a href="#" class="undock">隱藏</a>工具</li> 87 <li><a href="http://keleyi.com/tool/md5.htm">MD5加密</a></li> 88 <li><a href="http://keleyi.com/tool/htmlencode.htm" target="_blank">HTML編碼與解碼</a></li> 89 <li><a href="http://keleyi.com/tool/urldecode.htm" target="_blank">URL編碼與解碼</a></li> 90 <li><a href="http://keleyi.com/tool/regex.htm" target="_blank">.NET正則表達式匹配工具</a></li> 91 <li><a href="http://keleyi.com/ziliao/googlejavascriptstyle.htm">JavaScript代碼風格指南</a></li> 92 <li><a href="http://keleyi.com/ziliao/unicode/">Unicode字元列表</a></li> 93 <li><a href="http://keleyi.com/tool/color.htm" target="_blank" title="顏色選擇器"><img src="https://www.getit01.com/getimg_360.php?url=http://keleyi.com/tool/color/colormap_80.gif" alt="顏色選擇器" /></a></li> 94 </ul> 95 </li> 96 </ul> 97 <div id="content"> 98 <h1>keleyi.com</h1> 99 <h2>jQuery高級可停靠側邊欄</h2>100 <p>101 把游標移動到左側按鈕上，相應的側邊欄會自動彈出。102 </p>103 <p>104 當游標離開欄目區域時，側邊欄自動隱藏。105 </p>106 <p>107 側邊欄彈出時，點擊「固定」鏈接可以使相應的欄目固定，不自動隱藏。108 </p>109 <p>110 點擊「隱藏」鏈接可以是相應欄目隱藏。111 </p>112 <p>113 原文：<a href="http://keleyi.com/a/bjac/mt97p5y9.htm" target="_blank">http://keleyi.com/a/bjac/mt97p5y9.htm</a>114 </p>115 </div>116 117 <div style="text-align:center;clear:both">118 <p>來源：<a href="http://keleyi.com" target="_blank">網路</a>　代碼整理：<a href="http://keleyi.com" target="_blank">柯樂義</a>　感謝：<a href="http://keleyi.com" target="_blank">keleyi</a></p>119 <p>轉載請註明出處，此代碼僅供學習交流，請勿用於商業用途。</p>120 </div>121 </body>122 </html>