jQuery实现右上角点击后滑下来的竖向菜单

浏览数：28 / 时间：2015年06月09日

效果体验请点击这里: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>