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