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

你可能感兴趣的:(jquery)