织梦(dedecms)导航条dropdown.js的改进

织梦 dedecms 导航条dropdown.js的改进 ,可以设置 织梦 dedecms一个一直都显示的二级菜单,

修复了没有二级菜单时鼠标移上去仍然显示上一个 织梦 dedecms二级菜单的问题.支持一级菜单鼠标离开事件 。
 

html代码 

 

代码如下: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 

<html xmlns=""> 

<head> 

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

<title>我的网站</title> 

<meta name="description" content=http://www.dede58.com/"" /> 

<meta name="keywords" content=http://www.dede58.com/"" /> 

<link type="text/css" rel="stylesheet" href=http://www.dede58.com/"http:/www.188163.com/img/fnews/css/style.css" /> 

</head> 

<body> 

<div class="w1000"> 

<div class="w960"> 

<!--f1--> 

<!-- 菜单 --> 

<div id="menu" class="menus"> 

<ul> 

<!-- class='navselect'根据此属性来判断需要默认显示的二级菜单,以便在织梦模板中通用 --> 

<li class='navselect'><a href=http://www.dede58.com/"/" rel='dropmenu1'>主 页</a></li> 

<li><a href='/a/jinrongzixun/'>金融资讯</a></li> 

<li><a href='/a/gerenjinrong/' rel='dropmenu2'>个人金融</a></li> 

<li><a href='/a/qiyejinrong/' rel='dropmenu4'>企业金融</a></li> 

<li><a href='/a/caijingpindao/' rel='dropmenu5'>财经频道</a></li> 

<li><a href='/a/zhifujiesuan/' rel='dropmenu6'>支付结算</a></li> 

<li><a href='/a/yewushenqingtongdao/' rel='dropmenu7'>业务申请</a></li> 

<li><a href='/a/zhongyaogonggao/' >重要公告</a></li> 

<li><a href='/a/xinyongka/' >信用卡</a></li> 

</ul> 

</div> 

<div class="menus_bottom"> 

</div> 

<!-- //二级子类下拉菜单 --> 

<script type="text/javascript" src=http://www.dede58.com/"dropdown.js"></script> 

<ul id="dropmenu1" class="dropMenu"> 

<li><a href=http://www.dede58.com/"/a/gerenjinrong/touzilicai/">首页列表</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 

</ul> 

<ul id="dropmenu2" class="dropMenu"> 

<li><a href=http://www.dede58.com/"/a/gerenjinrong/touzilicai/">投资理财</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 

<li><a href=http://www.dede58.com/"/a/gerenjinrong/grdk/">个人贷款</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 

<li><a href=http://www.dede58.com/"/a/gerenjinrong/gerenxiaofei/">个人消费贷款</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 

<li><a href=http://www.dede58.com/"/a/gerenjinrong/xinyong/">信用贷款</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 

<li><a href=http://www.dede58.com/"/a/gerenjinrong/qichedaikuan/">汽车贷款</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 

<li><a href=http://www.dede58.com/"/a/gerenjinrong/yishoulou/">一手楼按揭</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 

<li><a href=http://www.dede58.com/"/a/gerenjinrong/ershoulou/">二手楼按揭</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 

<li><a href=http://www.dede58.com/"/a/gerenjinrong/grjy/">个人经营贷款</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 

</ul> 

<ul id="dropmenu4" class="dropMenu"> 

<li><a href=http://www.dede58.com/"/a/qiyejinrong/gongsirongzi/">公司融资</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 

<li><a href=http://www.dede58.com/"/a/qiyejinrong/maoyirongzi/">贸易融资</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 

<li><a href=http://www.dede58.com/"/a/qiyejinrong/gongsilicai/">公司理财</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 

<li><a href=http://www.dede58.com/"/a/qiyejinrong/piaojuyewu/">票据业务</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 

<li><a href=http://www.dede58.com/"/a/qiyejinrong/xiangmurongzi/">项目融资</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 

</ul> 

<ul id="dropmenu5" class="dropMenu"> 

<li><a href=http://www.dede58.com/"/a/caijingpindao/huangjin/">黄金</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 

<li><a href=http://www.dede58.com/"/a/caijingpindao/zhaiquan/">债券</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 

<li><a href=http://www.dede58.com/"/a/caijingpindao/waihui/">外汇</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 

<li><a href=http://www.dede58.com/"/a/caijingpindao/jijin/">基金</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 

</ul> 

<ul id="dropmenu6" class="dropMenu"> 

<li><a href=http://www.dede58.com/"/a/zhifujiesuan/pos/">P0S支付</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 

</ul> 

<ul id="dropmenu7" class="dropMenu"> 

<li><a href=http://www.dede58.com/"/a/yewushenqingtongdao/gerenyewu/">个人业务咨询</a>&nbsp;& amp;nbsp;|&nbsp;&nbsp;</li> 

<li><a href=http://www.dede58.com/"/a/yewushenqingtongdao/gongsiyewu/">公司业务咨询</a>&nbsp;& amp;nbsp;|&nbsp;&nbsp;</li> 

</ul> 

<ul id="dropmenu8" class="dropMenu"> 

</ul> 

<ul id="dropmenu3" class="dropMenu"> 

</ul> 

<script type="text/javascript"> cssdropdown.startchrome("menu")</script> 

</div> 

</div> 

<!--1000 end --> 

</body> 

</html> 

 

dropdown.js 

 

代码如下: 

var cssdropdown = { 

disappeardelay: 250, 

disablemenuclick: false, 

enableswipe: 1, 

enableiframeshim: 1, 

dropmenuobj: null, 

ie: document.all, 

firefox: document.getElementById && !document.all, 

swipetimer: undefined, 

bottomclip: 0, 

getposOffset: function(what, offsettype) { 

var totaloffset = (offsettype == "left") ? what.offsetLeft: what.offsetTop; 

var parentEl = what.offsetParent; 

while (parentEl != null) { 

totaloffset = (offsettype == "left") ? totaloffset + parentEl.offsetLeft: totaloffset + parentEl.offsetTop; 

parentEl = parentEl.offsetParent; 

return totaloffset; 

}, 

swipeeffect: function() { 

if (this.bottomclip < parseInt(this.dropmenuobj.offsetHeight)) { 

this.bottomclip += 10 + (this.bottomclip / 10); 

this.dropmenuobj.style.clip = "rect(0 auto " + this.bottomclip + "px 0)"; 

} else return; 

this.swipetimer = setTimeout("cssdropdown.swipeeffect()", 10); 

}, 

//隐藏或者显示二级菜单 

showhide: function(obj, e) { 

if (this.ie || this.firefox) this.dropmenuobj.style.left = this.dropmenuobj.style.top = "-500px"; 

if (e.type == "click" && obj.visibility == hidden || e.type == "mouseover") { 

if (this.enableswipe == 1) { 

if (typeof this.swipetimer != "undefined") clearTimeout(this.swipetimer); 

obj.clip = "rect(0 auto 0 0)"; 

this.bottomclip = 0; 

this.swipeeffect(); 

obj.visibility = "visible"; 

} else if (e.type == "click") obj.visibility = "hidden"; 

}, 

iecompattest: function() { 

return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement: document.body; 

}, 

clearbrowseredge: function(obj, whichedge) { 

var edgeoffset = 0; 

if (whichedge == "rightedge") { 

var windowedge = this.ie && !window.opera ? this.iecompattest().scrollLeft + this.iecompattest().clientWidth - 15 : window.pageXOffset + window.innerWidth - 15; 

this.dropmenuobj.contentmeasure = this.dropmenuobj.offsetWidth; 

if (windowedge - this.dropmenuobj.x < this.dropmenuobj.contentmeasure) edgeoffset = this.dropmenuobj.contentmeasure - obj.offsetWidth; 

} else { 

var topedge = this.ie && !window.opera ? this.iecompattest().scrollTop: window.pageYOffset; 

var windowedge = this.ie && !window.opera ? this.iecompattest().scrollTop + this.iecompattest().clientHeight - 15 : window.pageYOffset + window.innerHeight - 18; 

this.dropmenuobj.contentmeasure = this.dropmenuobj.offsetHeight; 

if (windowedge - this.dropmenuobj.y < this.dropmenuobj.contentmeasure) { 

edgeoffset = this.dropmenuobj.contentmeasure + obj.offsetHeight; 

if ((this.dropmenuobj.y - topedge) < this.dropmenuobj.contentmeasure) edgeoffset = this.dropmenuobj.y + obj.offsetHeight - topedge; 

return edgeoffset; 

}, 

//鼠标移动到一级菜单上执行 

dropit: function(obj, e, dropmenuID) { 

//隐藏上次显示的二级菜单 

if (this.dropmenuobj != null) this.dropmenuobj.style.visibility = "hidden"; 

this.clearhidemenu(); 

if (this.ie || this.firefox) { 

var me = this; 

//一级菜单鼠标离开事件 

obj.onmouseout = function() { 

cssdropdown.delayhidemenu(); 

}; 

//一级菜单鼠标点击事件 

obj.onclick = function() { 

return ! cssdropdown.disablemenuclick 

}; 

if (!dropmenuID) { 

return; 

this.dropmenuobj = document.getElementById(dropmenuID); 

if (!this.dropmenuobj) return; 

//为二级菜单绑定鼠标移动到事件 

this.dropmenuobj.onmouseover = function() { 

//移除从一级菜单离开时触发的方法,防止误执行 

cssdropdown.clearhidemenu(); 

//为二级菜单绑定鼠标离开事件 

this.dropmenuobj.onmouseout = function(e) { 

cssdropdown.dynamichide(e); 

//为二级菜单绑定鼠标点击事件 

this.dropmenuobj.onclick = function() { 

cssdropdown.delayhidemenu(); 

this.showhide(this.dropmenuobj.style, e); 

//调整二级菜单位置,以免位置错乱 

this.dropmenuobj.x = this.getposOffset(obj, "left"); 

this.dropmenuobj.y = this.getposOffset(obj, "top"); 

this.dropmenuobj.style.left = this.dropmenuobj.x - this.clearbrowseredge(obj, "rightedge") + "px";

this.dropmenuobj.style.top = this.dropmenuobj.y - this.clearbrowseredge(obj, "bottomedge") + obj.offsetHeight + 1 + "px"; 

this.positionshim(); 

}, 

positionshim: function() { 

if (this.enableiframeshim && typeof this.shimobject != "undefined") { 

if (this.dropmenuobj.style.visibility == "visible") { 

this.shimobject.style.width = this.dropmenuobj.offsetWidth + "px"; 

this.shimobject.style.height = this.dropmenuobj.offsetHeight + "px"; 

this.shimobject.style.left = this.dropmenuobj.style.left; 

this.shimobject.style.top = this.dropmenuobj.style.top; 

this.shimobject.style.display = (this.dropmenuobj.style.visibility == "visible") ? "block": "none"; 

}, 

hideshim: function() { 

if (this.enableiframeshim && typeof this.shimobject != "undefined") this.shimobject.style.display = 'none'; 

}, 

contains_firefox: function(a, b) { 

while (b.parentNode) if ((b = b.parentNode) == a) return true; 

return false; 

}, 

//隐藏二级菜单,兼容性处理 

dynamichide: function(e) { 

var evtobj = window.event ? window.event: e; 

//确认是鼠标离开事件,避免误触发 

if (this.ie && !this.dropmenuobj.contains(evtobj.toElement)) this.delayhidemenu(); 

else if (this.firefox && e.currentTarget != evtobj.relatedTarget && !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget)) this.delayhidemenu(); 

}, 

//鼠标点击菜单,或者离开菜单时执行 

delayhidemenu: function() { 

this.delayhide = setTimeout(function() { 

cssdropdown.dropmenuobj.style.visibility = 'hidden'; 

cssdropdown.hideshim(); 

cssdropdown.showAlways(); 

}, 

this.disappeardelay); 

}, 

//移除定时方法 

clearhidemenu: function() { 

if (this.delayhide != "undefined") clearTimeout(this.delayhide); 

}, 

//显示默认被选中的一级菜单 

showAlways: function() { 

if (this.always) { 

this.always.onmouseover({ 

type: "mouseover" 

}); 

}, 

//初始化 

startchrome: function() { 

for (var ids = 0; ids < arguments.length; ids++) { 

var menuitems = document.getElementById(arguments[ids]).getElementsByTagName("a"); 

for (var i = 0; i < menuitems.length; i++) { 

var relvalue = menuitems[i].getAttribute("rel"); 

//绑定鼠标移动到事件 

menuitems[i].onmouseover = function(e) { 

var event = typeof e != "undefined" ? e: window.event; 

cssdropdown.dropit(this, event, this.getAttribute("rel")); 

}; 

//显示默认被选中的一级菜单 

if (!this.always && menuitems[i].parentNode.getAttribute("class") == "navselect") { 

this.always = menuitems[i]; 

this.showAlways(); 

if (window.createPopup && !window.XmlHttpRequest) { 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/30b3486d43c3e3c74084ca5bde65a6e0.html