效果图:

以下是完整代码:

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="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="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>