织梦(dedecms)导航条dropdown.js的改进(附演示demo)

周武發表於 2023-10-24 00:00:00

织梦(dedecms)导航条dropdown.js的改进(附演示demo)

可以设置一个一直都显示的二级菜单，修复了没有二级菜单时鼠标移上去仍然显示上一个二级菜单的问题.支持一级菜单鼠标离开事件 html代码 
<div class="msgheader" style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>

复制代码

代码如下:
</div>
<p class="msgborder" style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
 
<!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=gb2312" /> 
<title>我的网站</title> 
<meta name="description" content="" /> 
<meta name="keywords" content="" /> 
<link type="text/css" rel="stylesheet" href="http://www.188163.com/img/fnews/css/style.css" /> 
</head> 
<body> 
<div class="w1000"> 
<div class="w960"> 
 
 
<div id="menu" class="menus"> 
<ul> 
 
<li class='navselect'><a href="/" 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> 
 
 
<ul id="dropmenu1" class="dropMenu"> 
<li><a href="/a/gerenjinrong/touzilicai/">首页列表</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
</ul> 
<ul id="dropmenu2" class="dropMenu"> 
<li><a href="/a/gerenjinrong/touzilicai/">投资理财</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
<li><a href="/a/gerenjinrong/grdk/">个人贷款</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
<li><a href="/a/gerenjinrong/gerenxiaofei/">个人消费贷款</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
<li><a href="/a/gerenjinrong/xinyong/">信用贷款</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
<li><a href="/a/gerenjinrong/qichedaikuan/">汽车贷款</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
<li><a href="/a/gerenjinrong/yishoulou/">一手楼按揭</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
<li><a href="/a/gerenjinrong/ershoulou/">二手楼按揭</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
<li><a href="/a/gerenjinrong/grjy/">个人经营贷款</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
</ul> 
<ul id="dropmenu4" class="dropMenu"> 
<li><a href="/a/qiyejinrong/gongsirongzi/">公司融资</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
<li><a href="/a/qiyejinrong/maoyirongzi/">贸易融资</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
<li><a href="/a/qiyejinrong/gongsilicai/">公司理财</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
<li><a href="/a/qiyejinrong/piaojuyewu/">票据业务</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
<li><a href="/a/qiyejinrong/xiangmurongzi/">项目融资</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
</ul> 
<ul id="dropmenu5" class="dropMenu"> 
<li><a href="/a/caijingpindao/huangjin/">黄金</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
<li><a href="/a/caijingpindao/zhaiquan/">债券</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
<li><a href="/a/caijingpindao/waihui/">外汇</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
<li><a href="/a/caijingpindao/jijin/">基金</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
</ul> 
<ul id="dropmenu6" class="dropMenu"> 
<li><a href="/a/zhifujiesuan/pos/">P0S支付</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
</ul> 
<ul id="dropmenu7" class="dropMenu"> 
<li><a href="/a/yewushenqingtongdao/gerenyewu/">个人业务咨询</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
<li><a href="/a/yewushenqingtongdao/gongsiyewu/">公司业务咨询</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li> 
</ul> 
<ul id="dropmenu8" class="dropMenu"> 
</ul> 
<ul id="dropmenu3" class="dropMenu"> 
</ul> 
 
</div> 
</div> 
 
</body> 
</html> 

 dropdown.js 
<div class="msgheader" style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>

复制代码

代码如下:
</div>
<p class="msgborder" style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
 
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).getElementsByTagName("a"); 
for (var i = 0; i < menuitems.length; i++) { 
var relvalue = menuitems.getAttribute("rel"); 
//绑定鼠标移动到事件 
menuitems.onmouseover = function(e) { 
var event = typeof e != "undefined" ? e: window.event; 
cssdropdown.dropit(this, event, this.getAttribute("rel")); 
}; 
//显示默认被选中的一级菜单 
if (!this.always && menuitems.parentNode.getAttribute("class") == "navselect") { 
this.always = menuitems; 
this.showAlways(); 
} 
} 
} 
if (window.createPopup && !window.XmlHttpRequest) { 
document.write('<IFRAME id="iframeshim" src="" frameBorder="0" scrolling="no"></IFRAME>'); 
this.shimobject = document.getElementById("iframeshim"); 
} 
} 
}

頁: [1]

琼殿技术论坛's Archiver

织梦(dedecms)导航条dropdown.js的改进(附演示demo)