jQuery实现右上角点击后滑下来的竖向菜单
效果体验请点击这里: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实现右上角点击后滑下来的竖向菜单的更多相关文章
- jQuery实现的鼠标滑过切换图片代码实例
jQuery实现的鼠标滑过切换图片代码实例:有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍 ...
- 基于jQuery的图片相册滑出放大插件
今天给大家带来一款基于jQuery的图片相册滑出放大插件.点击相册图片,展示该图片.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗..效 ...
- 右上角鼠标滑过展开收缩动画效果js代码的演示页面
http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...
- 美轮美奂!9款设计独特的jQuery/CSS3全新应用插件(下拉菜单、动画、图表、导航等)
今天要为大家分享9款设计非常独特的jQuery/CSS3全新应用插件,插件包含菜单.jQuery焦点图.jQuery表单.jQuery图片特效等.下面大家一起来看看吧. 1.jQuery水晶样式下拉导 ...
- jQuery实现淡入淡出二级下拉导航菜单的方法
本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...
- jQuery之点击弹出图标环形菜单
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- jQuery精仿手机上的翻牌效果菜单
代码简介: jQuery精仿手机上的翻牌效果菜单,很平滑的动画翻牌效果,每点击一下菜单,就会翻去一下,貌似很灵敏的动作.注意:如果预览时没看到效果,请刷新一下页面,让jquery载入就行了,在实际使用 ...
- 一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览 源码下载 实现的代码. ...
- JQUERY实现的小巧简洁的无限级树形菜单
JQUERY实现的小巧简洁的无限级树形菜单,可用于后台或前台侧栏菜单!兼容性也比较好. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
随机推荐
- MindManger 2016 64位 破解版
下载地址:http://pan.baidu.com/s/1mi7xkIO 如果失效请去 “毒逆天吧” 发个求助帖即可就有人补上
- Android全屏(包含3种隐藏顶部状态栏及标题栏和一种隐藏Android 4.0平板底部状态栏的方法)
http://www.xuebuyuan.com/558284.html 方法一 public class MainActivity extends Activity { @Override prot ...
- 深入理解DOM节点类型第一篇——12种DOM节点类型概述
× 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...
- Neutron 网络基本概念 - 每天5分钟玩转 OpenStack(66)
上次我们讨论了 Neutron 提供的功能,今天我们学习 Neutron 模块几个重要的概念. Neutron 管理的网络资源包括 Network,subnet 和 port,下面依次介绍. netw ...
- Rust初步(二):使用Visual Studio Code编写Rust程序(猜猜看游戏)
我是照着下面这篇帮助文档,完成了第一个完整的Rust程序: 猜猜看 游戏 http://kaisery.gitbooks.io/rust-book-chinese/content/content/3. ...
- WebStorm按Tab建快速生成代码模块
WS中,比如调试每次都要写的console.log(xxx);每次都要敲一遍,还有if模块,for循环模块,难道没有快捷键,可以生成代码模块吗,答案是“有”. 操作步骤如下(汉化版WS): 1.Alt ...
- 尽量使用translate而不是改变top/left进行动画(翻译)
前言 本文翻译自 Why Moving Elements With Translate() Is Better Than Pos:abs Top/left,本文有改动,添加了一些作者自己的理解,不当之 ...
- iOS-LaunchImage启动页
一. 目标: 设置一个漂亮的启动页. 二.步骤 1. 先创建LaunchImage 2. 进一步设置需要适配的启动页机型 3. 设置完成的效果 4.往里面拖图片,如图是适配的图片的配置 5. 在项目中 ...
- RichTextBox实现鼠标右键(剪切,复制,粘贴)功能
private static void InitRichTextBoxContextMenu(RichTextBox textBox) { //创建剪切子菜单 var cutMenuItem = ne ...
- 微信小程序探究
前段时间比较流行的微信小程序,因为一直没有所谓内测码也没具体关注.拖到现在正好借组内分享的时机来仔细了解一下微信小程序.了解一个新的事物无外乎从是什么(本质),怎么用(具体用法),为什么用(优缺点)来 ...