原文:
jQuery实现右上角点击后滑下来的竖向菜单
效果体验请点击这里: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>
