效果体验请点击这里:http://keleyi.com/a/bjad/27095rgj.htm

这个菜单我觉得可以做成在线客服之类的，点击下滑后，带关闭按钮，因此在不想显示的时候可以关掉它。

以下是源代码：

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
  5.  <title>jQuery实现右上角点击后滑下来的竖向菜单-柯乐义</title><base target="_blank" />
  6.  <style>
  7.  #opciones
  8.  {
  9.  z-index: 7000;
  10.  position: fixed;
  11.  padding-bottom: 10px;
  12.  padding-left: 10px;
  13.  width: 120px;
  14.  padding-right: 10px;
  15.  font: 12px/140% Arial, Helvetica, sans-serif;
  16.  background: #e7e7e7;
  17.  color: #999;
  18.  top: 0px;
  19.  right: 0px;
  20.  padding-top: 10px;
  21.  }
  22.  #opciones H2
  23.  {
  24.  border-bottom: #fff 1px solid;
  25.  padding-bottom: 3px;
  26.  margin: 0px 0px 3px;
  27.  padding-left: 0px;
  28.  padding-right: 0px;
  29.  color: #666;
  30.  font-size: 16px;
  31.  padding-top: 0px;
  32.  }
  33.  #opciones H3
  34.  {
  35.  padding-bottom: 0px;
  36.  text-indent: 0px;
  37.  margin: 3px 0px;
  38.  padding-left: 0px;
  39.  padding-right: 0px;
  40.  height: 15px;
  41.  color: #666666;
  42.  padding-top: 0px;
  43.  }
  44.  #opciones P
  45.  {
  46.  font-size: 12px;
  47.  }
  48.  #opciones A
  49.  {
  50.  color: #999;
  51.  text-decoration: none;
  52.  }
  53.  #opciones A:hover
  54.  {
  55.  background: #666666;
  56.  color: #fff;
  57.  }
  58.  #settings
  59.  {
  60.  z-index: 8000;
  61.  position: fixed;
  62.  text-indent: -99999px;
  63.  width: 43px;
  64.  display: block;
  65.  background: url(http://keleyi.com/keleyi/phtml/jqtexiao/22/opciones.gif) no-repeat 0px 0px;
  66.  height: 43px;
  67.  top: 0px;
  68.  cursor: pointer;
  69.  right: 0px;
  70.  }
  71.  #settings:hover
  72.  {
  73.  background: url(http://keleyi.com/keleyi/phtml/jqtexiao/22/opciones.gif) no-repeat 0px -86px;
  74.  }
  75.  .cerrar
  76.  {
  77.  background: url(http://keleyi.com/keleyi/phtml/jqtexiao/22/opciones.gif) no-repeat 0px -43px !important;
  78.  }
  79.  #opciones ul
  80.  {
  81.  padding: 0px;
  82.  margin: 0px;
  83.  }
  84.  #opciones li
  85.  {
  86.  list-style: none;
  87.  text-align: left;
  88.  }
  89.  </style>
  90.  <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js"></script>
  91.  <script type="text/javascript">
  92.  $(document).ready(function () {
  93.  $('#opciones').hide();
  94.  $('#settings').click(function () {
  95.  $('#opciones').slideToggle();
  96.  $(this).toggleClass("cerrar");
  97.  
  98.  });
  99.  });
  100.  </script>
  101.  </head>
  102.  <body style="text-align: center">
  103.  <div id="settings">
  104.  Settings</div>
  105.  <div id="opciones">
  106.  <ul>
  107.  <li><a href="http://keleyi.com/a/bjad/w0ysw5u6.htm" target="_blank">jQuery.now()函数介绍</a></li>
  108.  <li><a href="http://keleyi.com/a/bjad/m6mamp34.htm" title="（function($){….}）（jQuery）解析">
  109.  （function($){….}）</a></li>
  110.  <li><a href="http://keleyi.com/a/bjad/w7bbn7nw.htm">jQuery 1.11.0下载</a></li>
  111.  <li><a href="http://keleyi.com/a/bjad/p7gfevir.htm">jquery设置title属性</a></li>
  112.  <li><a href="http://keleyi.com/a/bjad/emf1jc13.htm">jquery日期输入插件</a></li>
  113.  <li><a href="http://keleyi.com/a/bjad/42v7nii9.htm">jQuery下拉日期选择器</a></li>
  114.  <li><a href="http://keleyi.com/a/bjad/liuvpkke.htm">jquery图片上传前剪裁</a></li>
  115.  <li><a href="http://keleyi.com/a/bjad/4kwkql05.htm">jquery背景自动切换</a></li>
  116.  <li><a href="http://keleyi.com/a/bjad/0ckt6xm9.htm">jQuery unbind() 方法</a></li>
  117.  <li><a href="http://keleyi.com/a/bjad/pmryuvga.htm">jquery产品多图展示</a></li>
  118.  <li><a href="http://keleyi.com/a/bjad/q2ee2xyt.htm">jquery图片放大镜插件</a></li></ul>
  119.  </div>
  120.  <div><h2>jQuery实现右上角点击后滑下来的竖向菜单</h2>
  121.  <br />
  122.  请点击右上角的图标 <a href="http://keleyi.com/a/bjad/27095rgj.htm">原文</a>
  123.  </div>
  124.  </body>
  125.  </html>

web前端：http://www.cnblogs.com/jihua/p/webfront.html

jQuery实现右上角点击后滑下来的竖向菜单的更多相关文章

  1. jQuery实现的鼠标滑过切换图片代码实例

    jQuery实现的鼠标滑过切换图片代码实例:有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍 ...

  2. 基于jQuery的图片相册滑出放大插件

    今天给大家带来一款基于jQuery的图片相册滑出放大插件.点击相册图片,展示该图片.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗..效 ...

  3. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

  4. 美轮美奂！9款设计独特的jQuery/CSS3全新应用插件（下拉菜单、动画、图表、导航等）

    今天要为大家分享9款设计非常独特的jQuery/CSS3全新应用插件,插件包含菜单.jQuery焦点图.jQuery表单.jQuery图片特效等.下面大家一起来看看吧. 1.jQuery水晶样式下拉导 ...

  5. jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...

  6. jQuery之点击弹出图标环形菜单

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  7. jQuery精仿手机上的翻牌效果菜单

    代码简介: jQuery精仿手机上的翻牌效果菜单,很平滑的动画翻牌效果,每点击一下菜单,就会翻去一下,貌似很灵敏的动作.注意:如果预览时没看到效果,请刷新一下页面,让jquery载入就行了,在实际使用 ...

  8. 一款基于jquery和css3的响应式二级导航菜单

    今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. ...

  9. JQUERY实现的小巧简洁的无限级树形菜单

    JQUERY实现的小巧简洁的无限级树形菜单,可用于后台或前台侧栏菜单!兼容性也比较好. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...

随机推荐

  1. Log Parser 2.2 分析 IIS 日志

    1,安装Log Parser 2.2 https://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=24659 ...

  2. python3.5 正则表达式

    我们平时上网的时候,经常需要在一些网站上注册帐号,而注册帐号的时候对帐号名称会有一些要求. 比如: 上面的图片中,输入的邮件地址.密码.手机号 才可以注册成功. 我们需要匹配用户输入的内容,判断用户输 ...

  3. Distributed2：Linked Server Login 添加和删除

    一,通过 sys.sp_addlinkedsrvlogin 创建Linked Server的Login 当在local Server 上需要访问Linked Server时,Local Server ...

  4. WPF textblock加入超链接

    <TextBlock Grid.Row=" Margin="75,0,0,0"> <Hyperlink Name="BlogHl" ...

  5. 3、Redis 基础

    Redis的五大数据类型 String(字符串) string是redis最基本的类型,你可以理解成与Memcached一模一样的类型,一个key对应一个value.string类型是二进制安全的.意 ...

  6. 窥探Swift系列博客说明及其Swift版本间更新

    Swift到目前为止仍在更新,每次更新都会推陈出新,一些Swift旧版本中的东西在新Swift中并不适用,而且新版本的Swift会添加新的功能.到目前为止,Swift为2.1版本.去年翻译的Swift ...

  7. 关于Docker官方CentOS镜像无法启动mysqld的总结

    很多童鞋反映,在Docker官方CentOS镜像中安装了Mysql server后,无法正常启动. 无法正常启动表现为两种情况: 1> 初始完数据库后,mysqld启动报错 2> syst ...

  8. multipart数据结构

    --[boundary]\r\n [headers]\r\n \r\n [content]\r\n --[boundary]\r\n [headers]\r\n \r\n [content]\r\n ...

  9. c++之字符型中的特殊字符回车符

    1.字符型的应用之强制类型转换: #include<iostream> using namespace std; int main() { ;i<;i++) { cout<&l ...

  10. 从零开始学 Java - 我放弃了 .NET ?

    这不是一篇引起战争的文章 毫无疑问,我之前是一名在微软温暖怀抱下干了近三年的 .NET 开发者,为什么要牛(sha)X一样去搞 Java 呢?因为我喜欢 iOS 阿!哈哈,开个玩笑.其实,开始学 Ja ...