AnyLink Positioning Question

[rwyliedesign]

1) Script Title: AnyLink Drop Down Menu

2) Script URL (on DD):

3) Describe problem: Please view the webpage I'm trying this script on: http://www.heshimakenya.org/maisha_collective.html


I am hoping this is possible but...

I have installed the script, styled it how I want it except for one thing. I want to center the drop-down box with the dimensions of the navigation buttons I created. For example, when you mouseover "Contribute" on the navigation bar, the drop-down box is left aligned with the button's left margin. Is there any way to style the drop-down box to center along the button's margins?

Thanks in advance!

[jscheuer1]

If you make the width that of the trigger (96px), not only will it appear centered underneath 'CONTRIBUTE', it will also no longer wrap 'take action'. To do so, change:

<a href= . . . onmouseover="dropdownmenu(this, event, menu5, '75px')" onmouseout="delayhidemenu()">

to:

<a href= . . . onmouseover="dropdownmenu(this, event, menu5, '96px')" onmouseout="delayhidemenu()">

[rwyliedesign]

Thanks. That worked! Though, "Take Action" didn't wrap on my screen (Firefox on a Mac).

I have a follow-up question... What if the menu has to be wider than the trigger? Such as the "About Us" trigger...

The trigger is 74px but the menu is 110px wide to accommodate long hyperlinks.

[jscheuer1]

Use this modified version of the script:

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.heshimakenya.org/about_background.html">background</a>'
menu1[1]='<a href="http://www.heshimakenya.org/about_vision_mission.html">vision &amp; mission</a>'
menu1[2]='<a href="http://www.heshimakenya.org/about_serve.html">who we support</a>'
menu1[3]='<a href="http://www.heshimakenya.org/about_UNconvention.html">UN convention</a>'
menu1[4]='<a href="http://www.heshimakenya.org/about_cofounders.html">co-founders</a>'
menu1[5]='<a href="http://www.heshimakenya.org/about_boards.html">boards</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://www.heshimakenya.org/girls_empowerment.html">girl&acute;s empowerment</a>'
menu2[1]='<a href="http://www.heshimakenya.org/case_management.html">case management</a>'
menu2[2]='<a href="http://www.heshimakenya.org/safehouse.html">safe house</a>'
menu2[3]='<a href="http://www.heshimakenya.org/programs_community.html">outreach &amp; advocacy</a>'

var menu3=new Array()
menu3[0]='<a href="http://www.heshimakenya.org/newsmedia.html">news</a>'
menu3[1]='<a href="http://heshimakenya.wordpress.com/","_blank">our blog</a>'
var menu4=new Array()
menu4[0]='<a href="http://www.heshimakenya.org/stories.html">Bizimana</a>'
menu4[1]='<a href="http://www.heshimakenya.org/stories2.html">Atong</a>'
menu4[2]='<a href="http://www.heshimakenya.org/stories3.html">Fatuma</a>'

var menu5=new Array()
menu5[0]='<a href="http://www.heshimakenya.org/contribute.html">donate</a>'
menu5[1]='<a href="http://www.heshimakenya.org/take_action.html">take action</a>'

var menu6=new Array()
menu6[0]='<a href="http://www.heshimakenya.org/contact.html">contact us</a>'
		
var menuwidth='165px' //default menu width
var menubgcolor='white'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

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, menuwidth, margleft){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
dropmenuobj.style.marginLeft = margleft || 0;
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=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth, margleft){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth, margleft)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) 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 (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>

It allows for an additional parameter to set the left margin of the dropdown, example for about us:

onMouseover="dropdownmenu(this, event, menu1, '110px', '-17px')"

A negative value will move it to the left, a positive value will move it to the right. 0 or skipping it will have no affect on the horizontal positioning.