Nothadoth Posted July 10, 2007 Share Posted July 10, 2007 I am using a dropdown menu script and here is the prescripted code for the function dropdownmenu(). function dropdownmenu(obj, e, dropmenuID){ if (window.event) event.cancelBubble=true else if (e.stopPropagation) e.stopPropagation() if (typeof dropmenuobj!="undefined") //hide previous menu dropmenuobj.style.visibility="hidden" clearhidemenu() if (ie5||ns6){ obj.onmouseout=delayhidemenu dropmenuobj=document.getElementById(dropmenuID) if (hidemenu_onclick) dropmenuobj.onclick=function(){dropmenuobj.style.visibility='hidden'} dropmenuobj.onmouseover=clearhidemenu dropmenuobj.onmouseout=ie5? function(){ dynamichide(event)} : function(event){ dynamichide(event)} showhide(dropmenuobj.style, e, "visible", "hidden") dropmenuobj.x=getposOffset(obj, "left") dropmenuobj.y=getposOffset(obj, "top") dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px" dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px" } return clickreturnvalue() } You can see from the link below that when you hover your mouse over a link at the top of the screen it opens the drop down menu to the right of the link. Could someone please help me make it so that the dropdown menu appears BELOW the link? Heres the page: http://www.westmidspoliceclub.com/en/ Thank you Quote Link to comment Share on other sites More sharing options...
Nothadoth Posted July 10, 2007 Author Share Posted July 10, 2007 I have noticed there are various variables included in the function which may be needed. So here is the entire script: var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds) var enableanchorlink=0 //Enable or disable the anchor link when clicked on? (1=e, 0=d) var hidemenu_onclick=1 //hide menu when user clicks within menu? (1=yes, 0=no) var horizontaloffset=5 //horizontal offset of menu from default location. (0-5 is a good value) /////No further editting needed var ie5=document.all var ns6=document.getElementById&&!document.all function getposOffset(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; } function showhide(obj, e, visible, hidden){ if (ie5||ns6) dropmenuobj.style.left=dropmenuobj.style.top=-500 if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") obj.visibility=visible else if (e.type=="click") obj.visibility=hidden } function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function clearbrowseredge(obj, whichedge){ var edgeoffset=0 if (whichedge=="rightedge"){ var windowedge=ie5 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15 dropmenuobj.contentmeasure=dropmenuobj.offsetWidth if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+(horizontaloffset*2) //no space to the right of page? Move menu over to the left } else{ var topedge=ie5 && !window.opera? iecompattest().scrollTop : window.pageYOffset var windowedge=ie5 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18 dropmenuobj.contentmeasure=dropmenuobj.offsetHeight if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up? edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then) edgeoffset=dropmenuobj.y } } return edgeoffset } function dropdownmenu(obj, e, dropmenuID){ if (window.event) event.cancelBubble=true else if (e.stopPropagation) e.stopPropagation() if (typeof dropmenuobj!="undefined") //hide previous menu dropmenuobj.style.visibility="hidden" clearhidemenu() if (ie5||ns6){ obj.onmouseout=delayhidemenu dropmenuobj=document.getElementById(dropmenuID) if (hidemenu_onclick) dropmenuobj.onclick=function(){dropmenuobj.style.visibility='hidden'} dropmenuobj.onmouseover=clearhidemenu dropmenuobj.onmouseout=ie5? function(){ dynamichide(event)} : function(event){ dynamichide(event)} showhide(dropmenuobj.style, e, "visible", "hidden") dropmenuobj.x=getposOffset(obj, "left") dropmenuobj.y=getposOffset(obj, "top") dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px" dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px" } return clickreturnvalue() } function clickreturnvalue(){ if ((ie5||ns6) && !enableanchorlink) return false else return true } function contains_ns6(a, b) { while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } function dynamichide(e){ if (ie5&&!dropmenuobj.contains(e.toElement)) delayhidemenu() else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) delayhidemenu() } function delayhidemenu(){ delayhide=setTimeout("dropmenuobj.style.visibility='hidden'",disappeardelay) } function clearhidemenu(){ if (typeof delayhide!="undefined") clearTimeout(delayhide) } could someone help me create a function dropdownmenu2 where it appears underneath the link? Thank you Quote Link to comment Share on other sites More sharing options...
Nothadoth Posted July 10, 2007 Author Share Posted July 10, 2007 Nevermind, I did it myself. Way to learn. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.