jquery 插件之仿“卓越亚马逊”首页弹出菜单效果

代码如下:

/*弹出式菜单*/
//没剑 2008-07-03
//http://regedit.cnblogs.com
/*参数说明*/
//showobj:要显示的菜单ID
//timeout:延时时间,鼠标停留/离开后延时多久开始显示/隐藏菜单
//speed:菜单显示速度,数字越大,显示越慢,默认为100
//调用示例:$("#button").DMenu("#content");
jQuery.fn.DMenu=function(showobj,timeout,speed){
timeout=timeout?timeout:300;
speed=speed?speed:100;
//按钮对象
var button=$(this);
//延时计数器
var timer=null;
//隐藏的浮动层
var hideDiv=$("<div></div>");
//容器对象
var Container=$("<div id=\"Container\"></div>");
Container.hide();
hideDiv.append(Container);
//菜单对象
var jqShowObj=$(showobj);
//隐藏菜单
jqShowObj.hide();
//菜单显示的状态
var display=false;
//按钮的offset
var offset=button.offset();
//菜单区高
var height=jqShowObj.height();
//菜单区宽
var width=jqShowObj.width();
//按钮的高
var btnHeight=button.height();
//按钮的宽
var btnWidth=button.width();
//定位层放到最前面
$(document.body).prepend(hideDiv);
//放到容器中
//Container.append(jqShowObj);

//****显示菜单方法开始****//
var showMenu=function(){
//如果菜单为显示则退出操作
if (display)
{
return false;
}
//设置容器属性
Container.css({
margin:"0 auto",
width:btnWidth+"px",
height:btnHeight+"px"
});
//定位隐藏层
hideDiv.css({
position:"absolute",
top:offset.top+"px",
left:offset.left+(btnWidth/2)-(width/2)+"px",
height:height+"px",
width:width+"px"
}).show();
//给容器加个黑边框
Container.css({
border:"1px solid #666666"
});
//显示定位层
//高宽慢慢增大
Container.animate({
marginTop:btnHeight+4,
height:height+4,
width:width+4,
opacity:'100'},speed,function(){
//动画结束时 start//
//显示菜单
jqShowObj.show();
//添加菜单入容器
Container.append(jqShowObj);
//去除边框
Container.css({
border:"0px"
});
//显示状态置为true
display=true;
//鼠标移入
jqShowObj.mouseover(function(){
clearTimeout(timer);
});
//鼠标移开
jqShowObj.mouseout(function(){
hideMenu();
});
//动画结束时 end//
});
};
//****显示菜单方法结束****//

//****隐藏菜单方法开始****//
var hideMenu=function(){
clearTimeout(timer);
//延时隐藏菜单
timer=setTimeout(function(){
//显示边框
Container.css({
border:"1px solid #666666"
});
//清空容器
Container.empty();
//收缩容器
Container.animate({
width:btnWidth,height:btnHeight,marginTop:'0', opacity: '0'
}, speed,function(){
//动画结束时 start//
//隐藏容器
Container.hide();
//定位层隐藏
hideDiv.hide();
//显示状态置为false
display=false;
//动画结束时 end//
});
}, timeout);
};
//****隐藏菜单方法结束****//

//绑定按钮鼠标经过事件
button.hover(function(e){
//延时显示菜单
clearTimeout(timer);
timer=setTimeout(function(){
showMenu();
}, timeout);
},function(){
clearTimeout(timer);
//鼠标离开按钮时,如果菜单还是显示状态则隐藏
if(display){
timer=setTimeout(function(){
hideMenu();
},timeout);
}
});
};

注:对于select挡住弹出菜单的问题,因为与插件没有关系,所以在此,偶没有解决,放哪个select在哪只是想提醒大家使用弹出菜单时要注意到这个问题,具体的解决方法可以自动搜索,或者在排版上作调整。
文件打包下载

时间: 2008-12-24

js 弹出菜单/窗口效果

是不是应该为弹出菜单提供更好的可访问支持?这篇文章将涉及到3种常见的弹窗: window.open 新建的浏览器窗口 <iframe /> 创建的窗口 页面 DOM 创建的伪弹出窗口:如弹出 tips 等 一.当页面无 JS 的时候 通常来说,无 JS 的情况那就按 HTML 的行为来做事.让链接可以链接,就已经解决.比较简单,我们简单带过: 1. window.open 新建的浏览器窗口:尽量让 JS 触发器绑定在 <a /> 上,并把 a 链接到一个新的页面,即可. 复制代码

Android ListView长按弹出菜单二种实现方式示例

复制代码 代码如下: /** * 知识点1:ListView item:两种长按弹出菜单方式* 知识点2:ListView SimpleAdapter的使用* 知识点 3:在java代码中创建一个ListView*/ public class ListOnLongClickActivity extends Activity {         private LinearLayout myListViewlayout;         private ListView mListView;   

Js+DVML很酷漂亮实用的右键弹出菜单

Js+DVML:很酷实用的右键弹出菜单 v\:*{behavior:url(#default#VML);} .menulist{position:static;PADDING-TOP:6;LETTER-SPACING:8;HEIGHT:20;TEXT-ALIGN:center;margin-bottom:-2} //作者:风云舞 var menutime1=null,showobjs1=null //menutime1=循环计时器调用变量,showobjs1=绑定菜单,定时器过程执行时调用 fu

Android之用PopupWindow实现弹出菜单的方法详解

在使用UC-WebBrowser时,你会发现它的弹出菜单跟系统自带的菜单不一样.它实现更多菜单选项的显示和分栏.其实,它的本身是PopupWindow或者是AlertDialog对话框,在里面添加两个GridView控件,一个是菜单标题栏,一个是菜单选项.菜单选项视图的切换可以通过适配器的变换,轻松地实现.点击下载该实例:一.运行截图:           二.实现要点:(1)屏蔽系统弹出的菜单:1.首先创建至少一个系统的菜单选项 复制代码 代码如下: @Override public bool

简单实现Android弹出菜单效果

本文实例为大家分享了Android弹出菜单效果的具体代码,供大家参考,具体内容如下 功能描述:用户单击按钮弹出菜单.当用户选择一个菜单项,会触发MenuItemClick事件并让弹出的菜单消失:如果用户在菜单外单击,则直接消失弹出的菜单.当菜单消失时,会引发DismissEvent事件(利用此事件可在菜单消失时做一些后续处理). 1.运行效果 2.添加菜单项 在Resources文件夹下添加一个menu子文件夹,然后在此子文件夹下添加一个名为demo07_popup_menu.xml的文件: <

Android实现类似于PC中的右键弹出菜单效果

Android系统中的ContextMenu(上下文菜单)类似于PC中的右键弹出菜单,当一个视图注册到一个上下文菜单时,执行一个在该对象上的"长按"动作,将出现一个提供相关功能的浮动菜单.上下文菜单可以被注册到任何视图对象中,不过,最常见的是用于列表视图ListView的item,在按中列表项时,会转换其背景色而提示将呈现上下文菜单.  注意:上下文菜单不支持图标和快捷键. 为了创建一个上下文菜单,你必须重写这个活动的上下文菜单回调函数:onCreateContextMenu() 和

编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu

编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu摘要: 本文介绍了使用 CSS 编写适用于 Opera, Firefox, IE 的多风格弹出菜单 说明:编写 CSS 弹出菜单的要点不外乎当鼠标移到目标上时, 显示出隐藏的标签. 要隐藏的标签使用 display:none; 属性进行隐藏. 触发显示隐藏标签主要使用 :hover 属性, 并用 display:block; 显示隐藏的标签. 但由于浏览器对 CSS 的支持并非一致.对于 Opera 或者 Firefox, 我们可以编

android popwindow实现左侧弹出菜单层及PopupWindow主要方法介绍

PopupWindow可以实现浮层效果,主要方法有:可以自定义view,通过LayoutInflator方法:可以出现和退出时显示动画:可以指定显示位置等. 为了将PopupWindow的多个功能展现并力求用简单的代码实现,编写了一个点击按钮左侧弹出菜单的功能,实现出现和退出时显示动画效果并点击其他区域时弹出层自动消失,效果图如下: 源码: 1.PopwindowOnLeftActivity.java 复制代码 代码如下: package com.pop.main; import android

Android仿QQ滑动弹出菜单标记已读、未读消息

在上一篇<Android仿微信滑动弹出编辑.删除菜单效果.增加下拉刷新功能>里,已经带着大家学习如何使用SwipeMenuListView这一开源库实现滑动列表弹出菜单,接下来,将进一步学习,如何为不同的list item呈现不同的菜单,此处我们做一个实例:Android 高仿QQ滑动弹出菜单标记已读.未读消息,看下效果图: 1. 创建项目,并导入SwipeMenuListView类库 2. 创建消息实体bean: public class Msg { public int id; publi

无js5款纯div+css制作的弹出菜单标准

一.最基本的:二级dropdown弹出菜单 二级dropdown弹出菜单--A CROSS BROWSER Drop DOWN CASCADING VALIDATING MENU /* common styling */ /* set up the overall width of the menu div, the font and the margins */ .menu { font-family: arial, sans-serif; width:750px; margin:0; mar

不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码

纯DIV/CSS对联漂浮广告代码(无JS) 源码网两侧漂浮.经测试,兼容IE6,IE7,Firefox浏览器. CSS代码为: 复制代码 代码如下: .r1{width:80px;height:80px;background:red;float:right;          position:fixed !important; top/**/:200px;          position:absolute; z-index:300; top:expression(offsetParent.

DIV+CSS实现的滑动门菜单特效代码

我们DIV+CSS实现的滑动门菜单特效 #menu { margin:0; padding:0; height:26em; overflow:hidden; background:#FFFCF2; } #menu li { list-style-type:none; float:left; display:block; width:100%; } #menu li a { display:block; text-decoration:none; color:#00b; margin:0; wid

Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法

这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示 还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮 解决了: 1.可以遮挡ie6下的select元素 但是在ie6下div没有透明度 2.弹出的div可以一直在浏览器屏幕中间显示 问题: 1.目前不支持.class 只支持#id 2.需要显示的div需要自己设置css 3.在ie6下需要设置css 例如div {_position: absolute;_top

jquery div提示框渐隐弹出与隐藏效果

jquery div提示框渐隐弹出与隐藏 *{margin:0;padding:0;font-size:12px;} input{width:120px;height:30px;cursor:pointer;} #note{position:absolute;width:400px;padding:20px;background:#eee;border:1px solid #ccc;left:40%;z-index:9999;display:none;} $(function(){ $('inp

鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)

如下所示: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <style type="text/css">        .toopTip        {            background-color:Yellow;            border-style:solid; 

如何制作一个弹出式的调查窗口?

<%    Dim bSurvey ' 是否显示调查表    const bID="1" ' 调查表的id bSurvey=false    ' 检查调查表是否已经显示过.    if instr(request.Cookies("s"),":" & bID & ":")=0 then   ' 如果调查表没有显示,更新Cookie response.Cookies("s").expir

用DIV完美模拟createPopup 弹出窗口(脚本之家修正版),支持Firefox,ie,chrome

补增一个效果图! 模拟Popup body{ margin:0; padding:0; text-align:center; } #container{ margin:50px auto; padding:10px auto; } #popupcontent{ position:absolute; border:1px solid #000000; line-height:17px; background-color:#F7F7F4; visibility:hidden; cursor:defa

Div+Css(+Js)菜单代码及制作工具

效果直逼flash的Div+Css+Js菜单 css菜单 body{ background-color:#B8B8A0; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ position: