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

原文: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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。