效果体验请点击这里:http://keleyi.com/a/bjad/27095rgj.htm

这个菜单我觉得可以做成在线客服之类的，点击下滑后，带关闭按钮，因此在不想显示的时候可以关掉它。

以下是源代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=uft-8" />

 <title>jQuery实现右上角点击后滑下来的竖向菜单-柯乐义</title><base target="_blank" />

 <style>

 #opciones

 {

 z-index: 7000;

 position: fixed;

 padding-bottom: 10px;

 padding-left: 10px;

 width: 120px;

 padding-right: 10px;

 font: 12px/140% Arial, Helvetica, sans-serif;

 background: #e7e7e7;

 color: #999;

 top: 0px;

 right: 0px;

 padding-top: 10px;

 }

 #opciones H2

 {

 border-bottom: #fff 1px solid;

 padding-bottom: 3px;

 margin: 0px 0px 3px;

 padding-left: 0px;

 padding-right: 0px;

 color: #666;

 font-size: 16px;

 padding-top: 0px;

 }

 #opciones H3

 {

 padding-bottom: 0px;

 text-indent: 0px;

 margin: 3px 0px;

 padding-left: 0px;

 padding-right: 0px;

 height: 15px;

 color: #666666;

 padding-top: 0px;

 }

 #opciones P

 {

 font-size: 12px;

 }

 #opciones A

 {

 color: #999;

 text-decoration: none;

 }

 #opciones A:hover

 {

 background: #666666;

 color: #fff;

 }

 #settings

 {

 z-index: 8000;

 position: fixed;

 text-indent: -99999px;

 width: 43px;

 display: block;

 background: url(http://keleyi.com/keleyi/phtml/jqtexiao/22/opciones.gif) no-repeat 0px 0px;

 height: 43px;

 top: 0px;

 cursor: pointer;

 right: 0px;

 }

 #settings:hover

 {

 background: url(http://keleyi.com/keleyi/phtml/jqtexiao/22/opciones.gif) no-repeat 0px -86px;

 }

 .cerrar

 {

 background: url(http://keleyi.com/keleyi/phtml/jqtexiao/22/opciones.gif) no-repeat 0px -43px !important;

 }

 #opciones ul

 {

 padding: 0px;

 margin: 0px;

 }

 #opciones li

 {

 list-style: none;

 text-align: left;

 }

 </style>

 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js"></script>

 <script type="text/javascript">

 $(document).ready(function () {

 $('#opciones').hide();

 $('#settings').click(function () {

 $('#opciones').slideToggle();

 $(this).toggleClass("cerrar");

 });

 });

 </script>

 </head>

 <body style="text-align: center">

 <div id="settings">

 Settings</div>

 <div id="opciones">

 <ul>

 <li><a href="http://keleyi.com/a/bjad/w0ysw5u6.htm" target="_blank">jQuery.now()函数介绍</a></li>

 <li><a href="http://keleyi.com/a/bjad/m6mamp34.htm" title="（function($){….}）（jQuery）解析">

 （function($){….}）</a></li>

 <li><a href="http://keleyi.com/a/bjad/w7bbn7nw.htm">jQuery 1.11.0下载</a></li>

 <li><a href="http://keleyi.com/a/bjad/p7gfevir.htm">jquery设置title属性</a></li>

 <li><a href="http://keleyi.com/a/bjad/emf1jc13.htm">jquery日期输入插件</a></li>

 <li><a href="http://keleyi.com/a/bjad/42v7nii9.htm">jQuery下拉日期选择器</a></li>

 <li><a href="http://keleyi.com/a/bjad/liuvpkke.htm">jquery图片上传前剪裁</a></li>

 <li><a href="http://keleyi.com/a/bjad/4kwkql05.htm">jquery背景自动切换</a></li>

 <li><a href="http://keleyi.com/a/bjad/0ckt6xm9.htm">jQuery unbind() 方法</a></li>

 <li><a href="http://keleyi.com/a/bjad/pmryuvga.htm">jquery产品多图展示</a></li>

 <li><a href="http://keleyi.com/a/bjad/q2ee2xyt.htm">jquery图片放大镜插件</a></li></ul>

 </div>

 <div><h2>jQuery实现右上角点击后滑下来的竖向菜单</h2>

 <br />

 请点击右上角的图标 <a href="http://keleyi.com/a/bjad/27095rgj.htm">原文</a>

 </div>

 </body>

 </html>

web前端：http://www.cnblogs.com/jihua/p/webfront.html

jQuery实现右上角点击后滑下来的竖向菜单的更多相关文章

  1. jQuery实现的鼠标滑过切换图片代码实例

    jQuery实现的鼠标滑过切换图片代码实例:有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍 ...

  2. 基于jQuery的图片相册滑出放大插件

    今天给大家带来一款基于jQuery的图片相册滑出放大插件.点击相册图片,展示该图片.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗..效 ...

  3. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

  4. 美轮美奂！9款设计独特的jQuery/CSS3全新应用插件（下拉菜单、动画、图表、导航等）

    今天要为大家分享9款设计非常独特的jQuery/CSS3全新应用插件,插件包含菜单.jQuery焦点图.jQuery表单.jQuery图片特效等.下面大家一起来看看吧. 1.jQuery水晶样式下拉导 ...

  5. jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...

  6. jQuery之点击弹出图标环形菜单

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  7. jQuery精仿手机上的翻牌效果菜单

    代码简介: jQuery精仿手机上的翻牌效果菜单,很平滑的动画翻牌效果,每点击一下菜单,就会翻去一下,貌似很灵敏的动作.注意:如果预览时没看到效果,请刷新一下页面,让jquery载入就行了,在实际使用 ...

  8. 一款基于jquery和css3的响应式二级导航菜单

    今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. ...

  9. JQUERY实现的小巧简洁的无限级树形菜单

    JQUERY实现的小巧简洁的无限级树形菜单,可用于后台或前台侧栏菜单!兼容性也比较好. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...

随机推荐

  1. iOS-大神们的博客收集

    唐巧的技术博客 http://blog.devtang.comOneV's Den http://onevcat.com破船之家 http://beyondvincent.comNSHipster h ...

  2. ClickOnce部署

    (1):一些发布方式 ClickOnce是什么玩意儿,这个问题嘛,在21世纪的互联网严重发达的时代,估计也没有必要大费奏章去介绍了,弄不好的话,还有抄袭之嫌.因此,有关ClickOnce的介绍,各位朋 ...

  3. vs运行时候冒了这个错：无法启动IIS Express Web 服务器~Win10

    后期会在博客首发更新:http://dnt.dkill.net 异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 网上的方法多种, ...

  4. word-spacing汉字不起作用的解决方法

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 调节文字间的距离,发现==>word-spacing汉字不起作用 研究发现, ...

  5. 【转】WPF防止界面卡死并显示加载中效果

    原文地址:http://www.cnblogs.com/linyijia/archive/2013/02/06/2900609.html <Window x:Class="Loadin ...

  6. px、dp与sp的区别以及换算

    1.px 即像素,1px代表屏幕上的一个物理像素点. 2.dp dip:device independent pixels(设备独立像素),dp与dip一样,不同的设备有不同的显示效果,一般为了支持W ...

  7. JAVA实现发送电子邮件

    相信大家对于网站也好,手机app也好,用户注册时,需要进行邮箱验证的功能特别好奇吧,本篇我将带领大家一起实现一下这个简单而又神奇的小功能,让我们的应用也可以加入这些神奇的元素.废话不多说,下面开始我们 ...

  8. JavaScript中的日期处理注意事项

    在业务逻辑比较多的系统里面,一般都会涉及到日期的处理.包括选择起始日期和结束日期,结束日期要大于起始日期,日期的显示和输入等. 输入这一块基本都是使用jQuery datetimepicker,后来系 ...

  9. Html,Css,Dom,javascript细节总结

    最近愈发觉得基础的重要性,细节决定成败,所以希望能够将自己注意到的搜集到的一些关于前端的小细节小知识整理出来,更好的方便自己记忆回顾. 1.在构建网页Html框架时,尽量只给外层标记(即是父标记)定义 ...

  10. 窥探Swift编程之在Playground上尽情的玩耍

    自从苹果公司发布Swift的时候,Xcode上又多了一样新的东西---"Playground".Playground就像操场一样,可以供我们在代码的世界里尽情的玩耍,在本篇博客中就 ...