效果图：

效果体验：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;
  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>

本文最新请看：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. Atitit 深入理解软件的本质 attilax总结 软件三原则"三次原则"是DRY原则和YAGNI原则的折

    Atitit 深入理解软件的本质 attilax总结 软件三原则"三次原则"是DRY原则和YAGNI原则的折 1.1.1. 软件的本质:抽象  1 1.2. 软件开发的过程就是不断 ...

  2. Win10+VS2015+EF6.0+MySQL5.6+MVC环境部署和排错

    本来已经好几个月不弄专业了,今天一哥们问我问题的时候重新捣鼓了一下,就做个文档供后来人参考吧~ 1.首先安装MySQL 5.6 安装很简单我就不说了,你参考下:http://jingyan.baidu ...

  3. LINQ系列：LINQ to SQL Exists/In/Any/All/Contains

    1. Any 返回没有Product的Category var expr = from c in context.Categories where !c.Products.Any() select c ...

  4. HTTP的长连接和短连接——Node上的测试

        本文主要从实践角度介绍长.短连接在TCP层面的表现,借助Node.JS搭建后台服务,使用WinHTTP.Ajax做客户端请求测试,最后简单涉及WebSocket.     关键字:长连接.短连 ...

  5. Android音频开发之AudioTrack实时播放

    前言: 其实在Android中录音可以用MediaRecord录音,操作比较简单.但是不能对音频进行处理.考虑到项目中做的是实时语音只能选择AudioRecord进行录音.然后实时播放也只能采用Aud ...

  6. 2014 Visual Studio Contact(); 直播笔记

    昨天微软干了几件了不起的事:.NET开发环境将开源.跨平台支持(Mac OS X和Linux).多设备支持(WP.Android和iOS)和Visual Studio免费(Visual Studio ...

  7. 小菜学习设计模式（四）—原型（Prototype）模式

    前言 设计模式目录: 小菜学习设计模式(一)—模板方法(Template)模式 小菜学习设计模式(二)—单例(Singleton)模式 小菜学习设计模式(三)—工厂方法(Factory Method) ...

  8. C语言版flappy bird黑白框游戏

    在此记录下本人在大一暑假,2014.6~8这段时间复习C语言,随手编的一个模仿之前很火热的小游戏----flappy bird.代码bug基本被我找光了,如果有哪位兄弟找到其他的就帮我留言下吧,谢谢了 ...

  9. 重温JSP学习笔记--三大指令九大内置对象

    最近在温习javaweb的相关基础知识,鉴于我弄丢了记满了整整一本的笔记,决定以后把笔记和一些学习上的心得以及碰到的一些问题统统都放在网上,今天看了一下jsp的相关基础,以下是笔记: JSP三大指令: ...

  10. LSM Tree存储组织结构介绍

    LSM Tree(Log Structured Merge Trees)数据组织方式被应用于多种数据库,如LevelDB.HBase.Cassandra等,下面我们从为什么使用LSM tree.LSM ...