织梦(dedecms)导航条dropdown.js的改进
发布时间：2020-12-14 04:17:18 所属栏目：Dedecms 来源：网络整理
导读：织梦 dedecms 导航条dropdown.js的改进 ，可以设置?织梦 dedecms一个一直都显示的二级菜单， 修复了没有二级菜单时鼠标移上去仍然显示上一个?织梦 dedecms二级菜单的问题.支持一级菜单鼠标离开事件 。 ? html代码? ? 代码如下:? !DOCTYPE html PUBLIC "-//W3
|
织梦 dedecms 导航条dropdown.js的改进 ，可以设置?织梦 dedecms一个一直都显示的二级菜单，
修复了没有二级菜单时鼠标移上去仍然显示上一个?织梦 dedecms二级菜单的问题.支持一级菜单鼠标离开事件 。 ?
html代码?
?
代码如下:?
<!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">?
<!--f1-->?
<!-- 菜单 -->?
<div id="menu" class="menus">?
<ul>?
<!-- class='navselect'根据此属性来判断需要默认显示的二级菜单，以便在织梦模板中通用 -->?
<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>?
<!-- //二级子类下拉菜单 -->?
<script type="text/javascript" src="dropdown.js"></script>?
<ul id="dropmenu1" class="dropMenu">?
<li><a href="/a/gerenjinrong/touzilicai/">首页列表</a> | </li>?
</ul>?
<ul id="dropmenu2" class="dropMenu">?
<li><a href="/a/gerenjinrong/touzilicai/">投资理财</a> | </li>?
<li><a href="/a/gerenjinrong/grdk/">个人贷款</a> | </li>?
<li><a href="/a/gerenjinrong/gerenxiaofei/">个人消费贷款</a> | </li>?
<li><a href="/a/gerenjinrong/xinyong/">信用贷款</a> | </li>?
<li><a href="/a/gerenjinrong/qichedaikuan/">汽车贷款</a> | </li>?
<li><a href="/a/gerenjinrong/yishoulou/">一手楼按揭</a> | </li>?
<li><a href="/a/gerenjinrong/ershoulou/">二手楼按揭</a> | </li>?
<li><a href="/a/gerenjinrong/grjy/">个人经营贷款</a> | </li>?
</ul>?
<ul id="dropmenu4" class="dropMenu">?
<li><a href="/a/qiyejinrong/gongsirongzi/">公司融资</a> | </li>?
<li><a href="/a/qiyejinrong/maoyirongzi/">贸易融资</a> | </li>?
<li><a href="/a/qiyejinrong/gongsilicai/">公司理财</a> | </li>?
<li><a href="/a/qiyejinrong/piaojuyewu/">票据业务</a> | </li>?
<li><a href="/a/qiyejinrong/xiangmurongzi/">项目融资</a> | </li>?
</ul>?
<ul id="dropmenu5" class="dropMenu">?
<li><a href="/a/caijingpindao/huangjin/">黄金</a> | </li>?
<li><a href="/a/caijingpindao/zhaiquan/">债券</a> | </li>?
<li><a href="/a/caijingpindao/waihui/">外汇</a> | </li>?
<li><a href="/a/caijingpindao/jijin/">基金</a> | </li>?
</ul>?
<ul id="dropmenu6" class="dropMenu">?
<li><a href="/a/zhifujiesuan/pos/">P0S支付</a> | </li>?
</ul>?
<ul id="dropmenu7" class="dropMenu">?
<li><a href="/a/yewushenqingtongdao/gerenyewu/">个人业务咨询</a> & amp;nbsp;| </li>?
<li><a href="/a/yewushenqingtongdao/gongsiyewu/">公司业务咨询</a> & amp;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) {?
document.write('<IFRAME id="iframeshim" src="" style="display: none; left: 0; top: 0; z-index: 90; position: absolute; filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)" frameBorder="0" scrolling="no"></IFRAME>');?
this.shimobject = document.getElementById("iframeshim");?
}?
}?
}?
上一篇：浅析织梦dedecms系统三个最重要的安全设置 下一篇：dedecms织梦内容页{dede:pagebreak/}分页标签 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |