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

概述织梦 dedecms 导航条dropdown.js的改进，可以设置织梦 dedecms一个一直都显示的二级菜单，修复了没有二级菜单时鼠标移上去仍然显示上一个织梦 dedecms二级菜单的问题.支持一级菜单鼠标离开事件。 html代码代码如下: !DOCTYPE html PUBLIC -//W3C//DTD XH 织梦 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 > <div >   <div ID="menu" > <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/' >xyk</a></li> </ul> </div> <div > </div>  <script type="text/JavaScript" src="dropdown.Js"></script> <ul ID="dropmenu1" > <li><a href="/a/gerenjinrong/touzilicai/">首页列表</a>  |  </li> </ul> <ul ID="dropmenu2" > <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" > <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" > <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" > <li><a href="/a/zhifujIEsuan/pos/">P0S支付</a>  |  </li> </ul> <ul ID="dropmenu7" > <li><a href="/a/yewushenqingtongdao/gerenyewu/">个人业务咨询</a> & amp;nbsp;|  </li> <li><a href="/a/yewushenqingtongdao/gongsiyewu/">公司业务咨询</a> & amp;nbsp;|  </li> </ul> <ul ID="dropmenu8" > </ul> <ul ID="dropmenu3" > </ul> <script type="text/JavaScript"> CSSdropdown.startChrome("menu")</script> </div> </div>  </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="" frameborder="0" scrolling="no"></iframe>'); this.shimobject = document.getElementByID("iframeshim"); } } }

上一篇：浅析织梦dedecms系统三个最重要的安全设置

下一篇：dedecms织梦内容页{dede:pagebreak/}分页标签

总结

以上是内存溢出为你收集整理的织梦(dedecms)导航条dropdown.js的改进全部内容，希望文章能够帮你解决织梦(dedecms)导航条dropdown.js的改进所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zz/1035855.html