自动弹出div菜单

最新推荐文章于 2021-05-31 11:10:55 发布
最新推荐文章于 2021-05-31 11:10:55 发布
阅读量983 收藏 1
点赞数
分类专栏： javascript 文章标签： div function url border table html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lgh1117/article/details/7860023
版权 
(function($){
/**
menus:菜单数据，json数据格式，每个menu json必须包含有两个个key，1、url，表示点击菜单是需要跳转的位置；2、name，显示的菜单名称；3、cssClass，当前菜单的样式
settings：对框的显示设置，width：宽；height：高；top：顶部距离；left：左边距离；cssClass：整个框的样式;cols:显示几列
*/
$.fn.showMenu = function(menus,settings){
	var tableId = '_show_Menu_id_';
	var cols = settings && settings.cols ? settings.cols : 2;
	var _left = settings && settings.left ? settings.left : 0;
	var _top = settings && settings.top ? settings.top : 0;
	var _width = settings && settings.width ? settings.width : 0;
	var _height = settings && settings.height ? settings.height : 0;
	
	var lt = function(){
		var p = this;
		var left  = $(this).offset().left;
		var top = $(this).offset().top;		
		while(p.get(0).tagName != 'HTML' && p.get(0).tagName != 'html' ){
			p = p.parent();
			left  += $(p).offset().left;
		    top += $(p).offset().top;	
		}
		return {left:left,top:top};
	}
	var offset = lt.apply(this);
	offset.left = offset.left + this.width()-8 + _left;
	offset.top   = offset.top-this.height()+5+_top;
	var tdCss = {'border-top':'1px solid #ffffff','border-right':'1px solid #ffffff','background-color':'#E8E8E8',cursor:'hand'};
	var d = function(){
		var $mdiv = $('<div></div>');
		$mdiv.attr('id',tableId);
		$mdiv.css({border:'1px solid #B0C4DE',position:'absolute',display:'none','z-index':9999,left:offset.left,top:offset.top});
		if(_width > 0){
			$mdiv.width(_width);
		}
		if(_height > 0){
			$mdiv.heigth(_height);
		}
		
		var $table = $('<table cellspacing=0 cellpading=0 ></table>');
		$table.css({'background-color':'#E8E8E8',border:'0px'});
		var index = 0;
		var $tr ;
		$(menus).each(function(){			
			if(index % cols == 0){
				$tr = $('<tr></tr>');
				$table.append($tr);
			}
			var $td = $('<td nowrap url='+this.url+'>'+this.name+'</td>');
			$td.css(tdCss);
			if(this.cssClass){
				$td.addClass(this.cssClass);
			}
			$tr.append($td);
			index++;
		});
		 
		if(menus.length % cols != 0){
			for(var i = cols -( menus.length % cols); i > 0 ; i--){
				var $td = $('<td nowrap> </td>');
				$td.css(tdCss);
				$tr.append($td);
			}
		}
		var tdbg;
		$table.find('td').each(function(){
			var url = $(this).attr('url');
			if(url && url != ''){
				$(this).click(function(){
					$table.find('td').css('background-color','#E8E8E8');
					$(this).css('background-color','#DB9D9B');
					hidebox();
					top.document.location = url;
				});
			}
			$(this).mouseover(function(){
				tdbg = $(this).css('background-color');
				$(this).css('background-color','#A2ECAD');
			}).mouseout(function(){
				$(this).css('background-color',tdbg);
			});
		});

		$mdiv.append($table);
		$(this).append($mdiv);
	}
	d.apply(this);
	$(this).mouseover(function(){
		//alert($('#'+tableId).is(':hidden'))
		//alert($('#'+tableId).is(':visible'))
		if(!$('#'+tableId).is(':visible')){
			$('#'+tableId).show(500);
		}
	});
	$(this).mouseout(function(ev){
		if(ev.clientX < offset.left){
			hidebox();
		}
		
	});
	
	var hidebox = function(){
		$('#'+tableId).hide(500);
	}
	$(document).bind('click',function(){hidebox();});

}
})(jQuery)


 主要功能是弹出和隐藏当前对话框，类似于丁丁地图或者点评网的切换城市一样的功能

cols为1的显示效果：

cols为2的显示效果：

cols为3的显示效果：

大家可以根据自己的实际情况进行改变。

 

例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> 菜单显示 </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
 </HEAD>

 <BODY>
  <center>
<div id="dia" style="width:120px;height:22px;border:1px solid #3d3d3d;cursor:handle">
菜单显示
</div>
  </center>
 </BODY>
<script>
(function($){
/**
menus:菜单数据，json数据格式，每个menu json必须包含有两个个key，1、url，表示点击菜单是需要跳转的位置；2、name，显示的菜单名称；3、cssClass，当前菜单的样式
settings：对框的显示设置，width：宽；height：高；top：顶部距离；left：左边距离；cssClass：整个框的样式;cols:显示几列
*/
$.fn.showMenu = function(menus,settings){
	var tableId = '_show_Menu_id_';
	var cols = settings && settings.cols ? settings.cols : 2;
	var _left = settings && settings.left ? settings.left : 0;
	var _top = settings && settings.top ? settings.top : 0;
	var _width = settings && settings.width ? settings.width : 0;
	var _height = settings && settings.height ? settings.height : 0;
	
	var lt = function(){
		var p = this;
		var left  = $(this).offset().left;
		var top = $(this).offset().top;		
		while(p.get(0).tagName != 'HTML' && p.get(0).tagName != 'html' ){
			p = p.parent();
			left  += $(p).offset().left;
		    top += $(p).offset().top;	
		}
		return {left:left,top:top};
	}
	var offset = lt.apply(this);
	offset.left = offset.left + this.width()-8 + _left;
	offset.top   = offset.top-this.height()+5+_top;
	var tdCss = {'border-top':'1px solid #ffffff','border-right':'1px solid #ffffff','background-color':'#E8E8E8',cursor:'hand'};
	var d = function(){
		var $mdiv = $('<div></div>');
		$mdiv.attr('id',tableId);
		$mdiv.css({border:'1px solid #B0C4DE',position:'absolute',display:'none','z-index':9999,left:offset.left,top:offset.top});
		if(_width > 0){
			$mdiv.width(_width);
		}
		if(_height > 0){
			$mdiv.heigth(_height);
		}
		
		var $table = $('<table cellspacing=0 cellpading=0 ></table>');
		$table.css({'background-color':'#E8E8E8',border:'0px'});
		var index = 0;
		var $tr ;
		$(menus).each(function(){			
			if(index % cols == 0){
				$tr = $('<tr></tr>');
				$table.append($tr);
			}
			var $td = $('<td nowrap url='+this.url+'>'+this.name+'</td>');
			$td.css(tdCss);
			if(this.cssClass){
				$td.addClass(this.cssClass);
			}
			$tr.append($td);
			index++;
		});
		 
		if(menus.length % cols != 0){
			for(var i = cols -( menus.length % cols); i > 0 ; i--){
				var $td = $('<td nowrap> </td>');
				$td.css(tdCss);
				$tr.append($td);
			}
		}
		var tdbg;
		$table.find('td').each(function(){
			var url = $(this).attr('url');
			if(url && url != ''){
				$(this).click(function(){
					$table.find('td').css('background-color','#E8E8E8');
					$(this).css('background-color','#DB9D9B');
					hidebox();
					top.document.location = url;
				});
			}
			$(this).mouseover(function(){
				tdbg = $(this).css('background-color');
				$(this).css('background-color','#A2ECAD');
			}).mouseout(function(){
				$(this).css('background-color',tdbg);
			});
		});

		$mdiv.append($table);
		$(this).append($mdiv);
	}
	d.apply(this);
	$(this).mouseover(function(){
		//alert($('#'+tableId).is(':hidden'))
		//alert($('#'+tableId).is(':visible'))
		if(!$('#'+tableId).is(':visible')){
			$('#'+tableId).show(500);
		}
	});
	$(this).mouseout(function(ev){
		if(ev.clientX < offset.left){
			hidebox();
		}
		
	});
	
	var hidebox = function(){
		$('#'+tableId).hide(500);
	}
	$(document).bind('click',function(){hidebox();});

}
})(jQuery)
var menus = eval('[{"url":"http://www.baidu.com","name":"百度"},{"url":"http://www.126.com","name":"网易邮箱"},{"url":"http://www.google.com.hk","name":"Google"},{"url":"http://www.126.com","name":"网易邮箱"}]');
$("#dia").showMenu(menus,{cols:3});
</script>

</HTML>


 

 

 

 

 

lgh1117
关注
专栏目录
div制作的弹出菜单
09-23
纯div+css制作三级dropdown弹出菜单 导航菜单
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
10-24
通过以上的知识点介绍，我们可以了解到如何使用CSS和JavaScript来实现一个简单的网页交互功能——点击文字后弹出一个可自动关闭的DIV层菜单。这个例子不仅涉及了基本的HTML标签使用、CSS样式设置，还包含了...
5款纯div+css制作的弹出菜单(标准且无js)
joerong666
06-16 515
5款纯div+css制作的弹出菜单(标准且无js)   一、最基本的：二级dropdown弹出菜单&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://w...
纯div+css制作的弹出菜单
错误集中营
09-24 723
二级菜单弹出 .menu { font-family: arial, sans-serif; width:750px; margin:0; margin:50px 0; } .menu ul { padding:0; margin:0; list-style-type: none; } .menu ul li { float:left; posit
menudiv.php,CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
weixin_32049085的博客
03-18 202
本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法。分享给大家供大家参考。具体分析如下：这里用CSS+JS实现点击文字后动画展开一个DIV层菜单，到期会自动关闭，是CSS结合JS实现的效果。/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">CSS+JS弹出DIV层var w = 0;var h...
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
10-26
本文将探讨如何使用JavaScript来实现一个基本的交互功能：当鼠标移动到主菜单项上时，弹出相应的子菜单；而当鼠标移开这些子菜单时，它们能自动消失。这种效果常见于网站的导航菜单中，为用户提供快速访问子页面的...
javascript轻松实现当鼠标移开时已弹出子菜单自动消失.docx
01-19
### JavaScript 实现鼠标移开时已弹出子菜单自动消失 在现代Web开发中，创建交互式的用户界面是一项重要的任务。其中一个常见的需求是为网站添加菜单功能，特别是那些具有子菜单项的导航栏。本篇文章将详细介绍如何...
html弹出div提示自动关闭,js实现非常棒的弹出div
weixin_30982943的博客
05-31 150
LIGHTBOX EXAMPLE.black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.6; opacity:.60; filter: alpha(op...
div+css制作的弹出菜单
05-12
div+css制作的弹出菜单
五款纯div+css制作的弹出菜单
09-09
五款纯div+css制作的弹出菜单五款纯div+css制作的弹出菜单
网页弹出div层的js-javascript
04-09
可以在网页中弹出一个div层，封装好了的，引用过后，可以直接带入窗口的大小，打开的路径。有动画效果。
html弹出div页面
06-07
有关于html类似于弹窗效果的div，可以进行自定义内容。。。
php代码div自动弹出窗口,jQuery实现弹出窗口弹出div层的实例代码
weixin_29864813的博客
03-13 231
通过今天的jquery实例学习，我们要达到这样的效果：点击页面的链接，弹出一个div层，同时页面的其他部分变灰并且不能点击；无论是改变浏览器窗口大小还是下拉滚动条，这个弹出层都能始终保持居中；点击页面的关闭按钮，弹出层消失，页面恢复原样。这里借鉴之前的一篇文章《基于jQuery的固定飘浮层》，使弹出窗口可以始终固定在浏览器的正中间。在这里有一个要点，就是如何使页面的其他地方在弹出窗口的同时变灰。我...
js弹出DIV层
weixin_30483697的博客
07-23 418
备忘。。 js代码 /**//** *@authorAdministrator */ varModalOpacity=0; varth1; varwidth=0; varheight=0; varright,top; varmousePos; document.onmousemove=mouseMove; functionmouseMove...
几款纯div+css制作的弹出菜单标准且无js
yjp2006的专栏
06-14 771
1.内容不会挤跑 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml" l
html弹出div提示自动关闭,html弹出div弹窗
weixin_39770506的博客
05-31 170
点击文字弹出一个DIV层窗口代码.black_overlay{display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color: black;z-index:1001;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=88);}...
BootStrap教程：创建向上弹出式菜单
"Bootstrap教程-创建向上弹出式菜单与Java中的静态变量概念" 在Bootstrap框架中，向上弹出式菜单（Dropup）是一种常见的交互设计元素，它与下拉菜单相反，当用户点击按钮时，菜单会从按钮上方弹出。这种设计在空间...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值