creating a drop down menu

Posted: Sat May 19, 2007 12:06 pm

i am looking for a way to have a drop down menu when you rollover an image. i have found ways to do it with just text links, but not with an image. any help with pointing me in the right direction?

registered · Posted: Sun May 20, 2007 6:44 am

Actually, the two should be quite similar. Instead of using the "onclick()" event, you would use "onmouseover()" to show the menu and then "onmouseout()" to then hide the menu.

Posted: Sun May 20, 2007 3:08 pm

okay, well i guess you cant used css style or javascript in header.html?

Posted: Sun May 20, 2007 5:19 pm

t_henson, actually, use external files and then add the links to them in includes/javascript.php. Then you can call the functions / etc. from your main content / blocks / header / whatever just fine.

Posted: Sun May 20, 2007 7:10 pm

okay i added the css style and the javascript functions to javascript.php and then added the onmouseover() info in the header.html file but i cant get it to work.

Posted: Mon May 21, 2007 6:01 am

Please post your header.html file here if you don't mind (unless it is riddled with javascript). Otherwise send it and your .CSS and .JS files to me at montegoATmontegoscriptsDOTcom and I'll take a look.

Posted: Mon May 21, 2007 10:22 am

thanks. i sent you an email.

Posted: Mon May 21, 2007 5:00 pm

only A supports the :hover pseudo.
Therefore use <a><img></a>

Posted: Tue May 20, 2008 9:05 pm

hi i am trying to use javascript functions in my nuke header as well but with no luck. Can you please help? Thank you.

Posted: Wed May 21, 2008 5:27 am

candy, a link to your site which has the changes you have made would be helpful. Also, having some idea of what you are trying to add... thanks.

Posted: Wed May 21, 2008 1:59 pm

thanks...i haven't actually made the changes because if i overwrite my current header it will be screwy. so i am waiting to fix the header before overwriting my current one. i basically took my header and am adding a row that has a drop down menu in javascript but when i go to test it on the site, the script doesn't work because the drop down isn't shown. any ideas on why this isn't working? thx!!!

Posted: Thu May 22, 2008 3:42 pm

here's the script i have in my header.html file but when i go to upload it the drop down menu doesn't work or show. any ideas on what i might be leaving out or doing wrong? Thank you!!!

Code:

"<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="/modules.php?name=Forums">Forums</a>'


menu1[1]='<a href="/modules.php?name=Your_Account">My Account</a>'





//Contents for menu 2, and so on


var menu2=new Array()


menu2[0]='<a href="/modules.php?name=marketplace">Marketplace</a>'


menu2[1]='<a href="/modules.php?name=Downloads">Coupons</a>'


menu2[2]='<a href="/modules.php?name=News&file=article&sid=5">Kids Eat Free</a>'











//Contents for menu 3, and so on


var menu3=new Array()


menu3[0]='<a href="/modules.php?name=Forums">Message Boards</a>'


menu3[1]='<a href="/modules.php?name=TotalCalendar">Event Calendar</a>'


menu3[2]='<a href="/modules.php?name=Chat">Chat</a>'


menu3[3]='<a href="/modules.php?name=coppermine">Photos</a>'


menu3[4]='<a href="/modules.php?name=Journal">Member Blogs</a>'


menu3[5]='<a href="/modules.php?name=Your_Account">My Account</a>'





var menuwidth='165px' //default menu width


var menubgcolor='lightyellow'  //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){


if (ie4||ns6)


dropmenuobj.style.left=dropmenuobj.style.top="-500px"


if (menuwidth!=""){


dropmenuobj.widthobj=dropmenuobj.style


dropmenuobj.widthobj.width=menuwidth


}


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){


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)


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>

Posted: Thu May 22, 2008 5:00 pm

Maybe you can PM me a link to your site as I really want to see the end result when the HTML is generated. Wink

Posted: Thu May 22, 2008 6:22 pm

i dont' have the header on my site because it is faulty. i have it on my site as /header3.html instead of header.html and by itself it shows up. only when i plug it into the header.html file does it not work. in other words, i don't have it as part of my site now because the drop down doesn't work. i was hoping to troubleshoot and resolve it before i upload it as my new /header.html file. thankx!

Posted: Mon May 26, 2008 10:18 pm

any ideas on how i can get this jscript header to work for the drop down menu? thanks!

Posted: Tue May 27, 2008 6:18 am

candy, its on my list, but I have things ahead of it. Once you said that I cannot see the generated HTML, it makes my job that much more difficult and takes time that I have very little of. I'll get to it. Sorry that I cannot give you a date as to when... Sad