生活随笔
收集整理的這篇文章主要介紹了
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> web前端：http://www.cnblogs.com/jihua/p/webfront.html
總結
以上是生活随笔為你收集整理的jQuery实现右上角点击后滑下来的竖向菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
