效果图：

效果体验：http://keleyi.com/keleyi/phtml/jqmenu/2.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.com/keleyi/phtml/jqmenu/2/keleyidock.css" />

 <script type="text/javascript" src="http://keleyi.com/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://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>

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

 </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://keleyi.com/game/1/">HTML5捕鱼游戏</a></li>

 <li><a href="http://keleyi.com/game/2/">不上不下</a></li>

 <li><a href="http://keleyi.com/game/3/">打地鼠</a></li>

 <li><a href="http://keleyi.com/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://keleyi.com/tool/md5.htm">MD5加密</a></li>

 <li><a href="http://keleyi.com/tool/htmlencode.htm" target="_blank">HTML编码与解码</a></li>

 <li><a href="http://keleyi.com/tool/urldecode.htm" target="_blank">URL编码与解码</a></li>

 <li><a href="http://keleyi.com/tool/regex.htm" target="_blank">.NET正则表达式匹配工具</a></li>

 <li><a href="http://keleyi.com/ziliao/googlejavascriptstyle.htm">JavaScript代码风格指南</a></li>

 <li><a href="http://keleyi.com/ziliao/unicode/">Unicode字符列表</a></li>

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

 </ul>

 </li>

 </ul>

 <div id="content">

 <h1>keleyi.com</h1>

 <h2>jQuery高级可停靠侧边栏</h2>

 <p>

 把光标移动到左侧按钮上，相应的侧边栏会自动弹出。

 </p>

 <p>

 当光标离开栏目区域时，侧边栏自动隐藏。

 </p>

 <p>

 侧边栏弹出时，点击“固定”链接可以使相应的栏目固定，不自动隐藏。

 </p>

 <p>

 点击“隐藏”链接可以是相应栏目隐藏。

 </p>

 <p>

 原文：<a href="http://keleyi.com/a/bjac/mt97p5y9.htm" target="_blank">http://keleyi.com/a/bjac/mt97p5y9.htm</a>

 </p>

 </div>

 <div style="text-align:center;clear:both">

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

 <p>转载请注明出处，此代码仅供学习交流，请勿用于商业用途。</p>

 </div>

 </body>

 </html>

本文最新请看：http://keleyi.com/a/bjac/mt97p5y9.htm

侧边栏汇总：http://keleyi.com/a/bjac/lt4rmbjl.htm

jQuery实现侧边导航栏效果的更多相关文章

  1. 导航菜单：jQuery粘性滚动导航栏效果

    粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单 ...

  2. 【机器学习实践】Jupyter Notebook安装 侧边导航栏功能 操作及其他常用扩展功能介绍

    安装过程:  1. 首先我们引入jupyter_contrib_nbextension这个第三方库. 2. 在Anaconda Promot中输入命令: pip install jupyter_con ...

  3. 【源码分享】jquery+css实现侧边导航栏

    jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...

  4. 【分享】纯jQuery实现星巴克官网导航栏效果

    前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...

  5. 【方法】纯jQuery实现星巴克官网导航栏效果

    前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...

  6. [置顶] bootstrap自定义样式-bootstrap侧边导航栏的实现

    前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...

  7. Android 新兴的UI模式——侧边导航栏【转】

    侧边导航栏也就是大家熟知的SliddingMenu,英文也叫Fly-In App Menu.Side Navigation等.当然谷歌现在已经推出类似这个效果的组件--Navigation Drawe ...

  8. html+css写出响应式侧边导航栏

    html部分:先写用div画好六个导航的卡片,再利用css添加响应效果 <div class='card-holder'> <div class='card-wrapper'> ...

  9. 移动端如何用swiper实现导航栏效果

    在移动端如何用swiper实现导航栏效果 我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能:而这个功能如果自己写的话会很麻烦,所以我在这推荐一下swiper这个插件. 其实swiper中的官 ...

随机推荐

  1. vmware 虚拟机通信拿不到 inet addr 的解决办法

    我在虚拟机上安装完红帽之后,使用ifconfig命令来看网卡的IP,但是,输入命令之后,eht0里面只有 inet6 addr 而没有 inet addr,不多说,上图. 解决办法如下:打开 虚拟机设 ...

  2. <dependency>

      <dependency>             <groupId>org.hibernate</groupId>                       ...

  3. AngularJS之Dependency Injection（五）

    前言 这一节我们来讲讲AngularJS中的依赖注入,在实际开发中Angular提供了具体的方法供我们去调用,但是一旦业务不能满足要求或者出现麻烦或者错误时导致无从下手,所以基于此我们有必要深入一点去 ...

  4. 如何装出高逼格的64位win7系统

    自从有了ghost这个玩艺儿,装系统就不再是什么技术活了,但是一直崇尚纯净.原生.DIY的挨踢男来说,这种千篇一律的系统从来都不是他们想要的.为了榨干硬件的每一滴性能,发挥软件的最大效果,他们喜欢折腾 ...

  5. 小菜学习Winform（一）贪吃蛇

    前言 说到贪吃蛇,大家可能小时候都玩过,小菜最近在整理Winfrom的学习系列,那我觉得有兴趣才会有学习,就从这个小游戏讲起吧. 实现 其实我刚开始学习编程的时候,感觉写个贪吃蛇的程序会很难,因为涉及 ...

  6. 改用C++生成自动化数据表

    改用C++生成自动化数据表 前面的文章中,我们讨论了使用一个基于.NET的第三方程序库来从程序中来生成数据表.在我看来,这整个思路是非常有用的,例如为显示测试结果.我经常会自己在博客中尝试各种像这样的 ...

  7. 【iOS】NSNumberFormatter

    介绍 NSNumberFormatter 应该可以满足你对数据形式的一般需求,值得了解一下. NSNumber *num1 = [NSNumber numberWithDouble:1234567.8 ...

  8. 输入URL到展现页面的全过程

    最近在看一本关于网络协议的书<图解HTTP> 当我们在浏览器的地址栏输入 http://www.pwstrick.com ,然后回车,回车这一瞬间到看到页面到底发生了什么呢? 1.  域名 ...

  9. ubuntu /var/log/下文件介绍

    本文简单介绍ubuntu /var/log/下各个日志文件,方便出现错误的时候查询相应的log   /var/log/alternatives.log -更新替代信息都记录在这个文件中 /var/lo ...

  10. HuffmanTree的浅析和在C#中的算法实现

    无论是在我们的开发项目中,还是在我们的日常生活中,都会较多的涉及到文件压缩.谈到文件压缩,可能会有人想问文件压缩到底是怎么实现的,实现的原理是什么,对于开发人员来说,怎么实现这样一个压缩的功能. 接下 ...