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

作者: jiukeshuju 分类: DEDECMS 发布时间: 2020-10-02 16:39


织梦 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>&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;& amp;nbsp;|&nbsp;&nbsp;</li>  <li><a href=”/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) {  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”);  }  }  } 

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!