发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
AI助手
留言交流
以下是完整代码:
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/phtml/jqmenu/2/keleyidock.css" /> 9 <script type="text/javascript" src="http:///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:///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> 71 <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> 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:///game/1/">HTML5捕鱼游戏</a></li> 78 <li><a href="http:///game/2/">不上不下</a></li> 79 <li><a href="http:///game/3/">打地鼠</a></li> 80 <li><a href="http:///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:///tool/md5.htm">MD5加密</a></li> 88 <li><a href="http:///tool/htmlencode.htm" target="_blank">HTML编码与解码</a></li> 89 <li><a href="http:///tool/urldecode.htm" target="_blank">URL编码与解码</a></li> 90 <li><a href="http:///tool/regex.htm" target="_blank">.NET正则表达式匹配工具</a></li> 91 <li><a href="http:///ziliao/googlejavascriptstyle.htm">JavaScript代码风格指南</a></li> 92 <li><a href="http:///ziliao/unicode/">Unicode字符列表</a></li> 93 <li><a href="http:///tool/color.htm" target="_blank" title="颜色选择器"><img src="http:///tool/color/colormap_80.gif" alt="颜色选择器" /></a></li> 94 </ul> 95 </li> 96 </ul> 97 <div id="content"> 98 <h1></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:///a/bjac/mt97p5y9.htm" target="_blank">http:///a/bjac/mt97p5y9.htm</a> 114 </p> 115 </div> 116 117 <div style="text-align:center;clear:both"> 118 <p>来源:<a href="http://" target="_blank">网络</a> 代码整理:<a href="http://" target="_blank">柯乐义</a> 感谢:<a href="http://" target="_blank">keleyi</a></p> 119 <p>转载请注明出处,此代码仅供学习交流,请勿用于商业用途。</p> 120 </div> 121 </body> 122 </html>
来自: 昵称10504424 > 《工作》
0条评论
发表
请遵守用户 评论公约
div当滚动到页面顶部的时候固定在顶部实例代码
基于Bootstrup的jQuery滑动侧边栏插件
基于Bootstrup的jQuery滑动侧边栏插件Bootstrap Offcanvas是一款非常简单的jQuery隐藏滑动侧边栏插件。
导航栏背景图片切换
导航栏背景图片切换导航栏背景图片切换。导航栏背景图片的切换,使用CSS或者JS。} .topNavigation li { float: left;} .topNavigation li a:link { color: #000000;}), ...
知道这几网站后,我的工作效率提高了三倍
这是一个关于PPT相关内容的网址导航。这个是为设计师设计的网址导航,主要都是和网页设计相关的网址导航,除了设计的素材、图片、字体、...
如何在侧边栏设置天气预报?
天气预报代码1 天气预报代码2 天气预报代码3 天气预报代码4 天气预报代码5 天气预报代码6 天气预报代码7 到下面地址定制你所在城市的天气预报 http://news.sina.com.cn/iframe/weather/441501.htm...
jquery 实现导航栏滑动效果
怎么去掉导航栏最后的分割线?
MacOS的5个Command键实用功能
MacOS的5个Command键实用功能MAC入门-MacOS的5个Command键实用功能。不过,Command 自己也能完成很多操作,帮助用户更好的在 OS X 中完...
WPS调整导航窗格(侧边栏)位置
WPS调整导航窗格(侧边栏)位置。1、使用WPS打开文档;2、在菜单栏点击“视图”;3、在视图菜单下点击“导航窗格”;4、在导航窗格下拉...
微信扫码,在手机上查看选中内容