當前位置：主頁 > 網站建設 > 織夢(dedecms)導航條dropdown.js的改進,DEDE技術

織夢(dedecms)導航條dropdown.js的改進,DEDE技術

時間:2023-07-20 11:07:20 閱讀: 文章分類: 網站建設作者: 織夢網站員

導讀:DEDE技術DEDE技術可以設置一個一直都顯示的二級菜單，修復了沒有二級菜單時鼠標移上去仍然顯示上一個二級菜單的問題.支持一級菜單鼠標離開事件 html代碼復制代碼代碼如下: !DO手機模板dede織夢模板免費下裁。

手機模板dede織夢模板免費下裁可以設置一個一直都顯示的二級菜單，修復了沒有二級菜單時鼠標移上去仍然顯示上一個二級菜單的問題.支持一級菜單鼠標離開事件 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" /> </head>dede,模板 <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>  <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>  </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"); } } }

關鍵詞標簽: 標簽織夢導航條

聲明: 本文由我的SEOUC技術文章主頁發布于:2023-07-20 ，文章織夢(dedecms)導航條dropdown.js的改進,DEDE技術主要講述導航條,標簽,織夢網站建設源碼以及服務器配置搭建相關技術文章。轉載請保留鏈接: http://www.bifwcx.com/article/web_31716.html