爱站程序员基地效果图：
效果体验：http://keleyi.com/keleyi/phtml/jqmenu/2.htm
以下是完整代码：
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;1314 $(\"#dock li ul\").height($(window).height());1516 $(\"#dock .dock-keleyi-com\").click(function () {17 $(this).parent().parent().addClass(\"docked\").removeClass(\"free\");1819 docked += 1;20 var dockH = ($(window).height()) / docked21 var dockT = 0;2223 $(\"#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();2930 if (docked > 0)31 $(\"#content\").css(\"margin-left\", \"250px\");32 else33 $(\"#content\").css(\"margin-left\", \"60px\");34 });3536 $(\"#dock .undock\").click(function () {37 $(this).parent().parent().addClass(\"free\").removeClass(\"docked\")38 .animate({ left: \"-180px\" }, 200).height($(window).height()).css(\"top\", \"0px\");3940 docked = docked - 1;41 var dockH = ($(window).height()) / docked42 var dockT = 0;4344 $(\"#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();5051 if (docked > 0)52 $(\"#content\").css(\"margin-left\", \"250px\");53 else54 $(\"#content\").css(\"margin-left\", \"60px\");55 });5657 $(\"#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>116117 <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>
本文最新请看：http://keleyi.com/a/bjac/mt97p5y9.htm
侧边栏汇总：http://keleyi.com/a/bjac/lt4rmbjl.htm
