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 ...
随机推荐
- css双飞翼布局
双飞翼布局是一种比较灵活的布局,始于淘宝UED,玉伯提出的,他着重介绍的是双飞翼栅格布局. 三列布局为"双飞燕"布局,可以把三栏比作一只鸟,main部分相当是于鸟的身体,而lef ...
- Windows无法安装到这个磁盘。请确保在计算机的BIOS菜单中启用了磁盘控制器
今天一朋友问我这个问题,呃,以前我也遇到过,但忘记记录了,这次就记录一下吧,就懒得打字了,图片里面很清楚了 不说点什么的话是不是太水了O(∩_∩)O~,好吧扩充一下: Windows无法安装到这个磁盘 ...
- ios语音输入崩溃
游戏中任何可以输入的地方,只要调用语音输入,必然会导致app崩溃,解决方法如下: ok, so essentially the gist of it is that siri wants gl con ...
- 判断checkbox的checked状态（jQuery写法）
$('#checkboxInput').click(function(){ if (this.checked){ $('.questionContainer').css({ "opacity ...
- Razor Engine，实现代码生成器的又一件利器
Razor Engine,之前仅仅是ASP.NET MVC的一种View引擎,目前已经完全成为一种可以独立使用的模版引擎,并且已经成为了CodePlex上一个开源的项目(http://razoreng ...
- SubSonic3.0插件分页查询速度测试
使用SubSonic3.0一段时间了,一直都想找机会测试一下各种查询分页速度,对比一下插件的查询效率到底怎么样,所以昨天写好了测试程序,准备好1K.1W.10W.50W和100W记录的数据表,早上详细 ...
- Ubuntu杂记——Ubuntu下安装VMware
转战Ubuntu,不知道能坚持多久,但是自己还是要努力把转战过程中的学习到的给记录下来.这次就来记录一下,Ubuntu下如何安装VMware. 就我所知,Linux下有VirtualBox和VMwar ...
- C算法编程题（六）串的处理
前言 上一篇<C算法编程题(五)“E”的变换> 连续写了几篇有关图形输出的编程题,今天说下有关字符串的处理. 程序描述 在实际的开发工作中,对字符串的处理是最常见的编程任务.本题目即是要求 ...
- 【解决】查询无法完成，因为其包含的查找列数已超过管理员强制实施的查找列阈值。Error code=0x80070093; Error source=Groove
前因: 修改了SharePoint Server 2013 下面的文档库的名称,原先2个汉字,现在8个汉字.结果,SkyDrive Pro 就无法同步了,无论是停止重新同步还是手动填写进行同步都不可以 ...
- Azure Application Gateway (2) 面向公网的Application Gateway
<Windows Azure Platform 系列文章目录> 本章将介绍如何创建面向公网的Application Gateway,我们需要准备以下工作: 1.创建新的Azure Reso ...