By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,759 Members | 1,778 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,759 IT Pros & Developers. It's quick & easy.

Drop Down Menu.

P: 71
I have a javascript drop down menu that I borrowed from a website. It utilizes a little .css to help with formatting. The menu works great, and on all 3 of the browsers I'm concerned about; but I am having one problem.

The menu, as designed, is a 1-tier menu (or is it 2-tier). It has the horizontal menu bar, along with the drop downs... but the drop downs aren't designed to propogate another menu (3rd teir). I was wondering if, but looking at the code I've got, anyone could see a *relatively* easy way to make this menu a three tier:

Here's the code:
Expand|Select|Wrap|Line Numbers
  1. /***********************************************
  2. * AnyLink Drop Down Menu-  Dynamic Drive (www.dynamicdrive.com)
  3. * This notice MUST stay intact for legal use
  4. * Visit http://www.dynamicdrive.com/ for full source code
  5. ***********************************************/
  6.  
  7. //Contents for Ministries Menu
  8. var menu1=new Array()
  9. menu1[0]='<a href="#" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu2, '150px')" onmouseout="delayhidemenu()">Worship</a>'
  10. menu1[1]='<a href="/fellowship.shtml">Fellowship</a>'
  11. menu1[2]='<a href="/outreach.shtml">Outreach</a>'
  12. menu1[3]='<a href="#" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu3, '150px')" onmouseout="delayhidemenu()">Discipleship</a>'
  13. menu1[4]='<a href="/care.shtml">Care</a>'
  14. menu1[5]='<a href="#" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu4, '150px')" onmouseout="delayhidemenu()">Youth/Children</a>'
  15.  
  16. //Contents for Worship Menu
  17. var menu2=new Array()
  18. menu2[0]='<a href="/choir.shtml">Choir</a>'
  19.  
  20. //Contents for Discipleship Menu
  21. var menu3=new Array()
  22. menu2[0]='<a href="/smallGroup.shtml">Small Groups</a>'
  23. menu2[1]='<a href="/sunSchool.shtml">Sunday School</a>'
  24.  
  25. //Contents for Youth/Children
  26. var menu4=new Array()
  27. menu2[0]='<a href="/youth.shtml">Middle/High School</a>'
  28. menu2[1]='<a href="/children.shtml">Preschool/Children</a>'
  29.  
  30. //Contents for Resources
  31. var menu5=new Array()
  32. menu2[0]='<a href="/message.shtml">Message Board</a>'
  33. menu2[1]='<a href="/links.shtml">Links</a>'
  34.  
  35. //Declare Menu variables
  36. var menuwidth='165px' //default menu width
  37. var menubgcolor='#3B3B65'  //menu bgcolor
  38. var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
  39. var hidemenu_onclick="yes" //hide menu when user clicks within menu?
  40.  
  41. /////No further editting needed
  42.  
  43. var ie4=document.all
  44. var ns6=document.getElementById&&!document.all
  45.  
  46. if (ie4||ns6)
  47. document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
  48.  
  49. function getposOffset(what, offsettype){
  50. var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
  51. var parentEl=what.offsetParent;
  52. while (parentEl!=null){
  53. totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
  54. parentEl=parentEl.offsetParent;
  55. }
  56. return totaloffset;
  57. }
  58.  
  59.  
  60. function showhide(obj, e, visible, hidden, menuwidth){
  61. if (ie4||ns6)
  62. dropmenuobj.style.left=dropmenuobj.style.top="-500px"
  63. if (menuwidth!=""){
  64. dropmenuobj.widthobj=dropmenuobj.style
  65. dropmenuobj.widthobj.width=menuwidth
  66. }
  67. if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
  68. obj.visibility=visible
  69. else if (e.type=="click")
  70. obj.visibility=hidden
  71. }
  72.  
  73. function iecompattest(){
  74. return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  75. }
  76.  
  77. function clearbrowseredge(obj, whichedge){
  78. var edgeoffset=0
  79. if (whichedge=="rightedge"){
  80. var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
  81. dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
  82. if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
  83. edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
  84. }
  85. else{
  86. var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
  87. var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
  88. dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
  89. if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
  90. edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
  91. if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
  92. edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
  93. }
  94. }
  95. return edgeoffset
  96. }
  97.  
  98. function populatemenu(what){
  99. if (ie4||ns6)
  100. dropmenuobj.innerHTML=what.join("")
  101. }
  102.  
  103.  
  104. function dropdownmenu(obj, e, menucontents, menuwidth){
  105. if (window.event) event.cancelBubble=true
  106. else if (e.stopPropagation) e.stopPropagation()
  107. clearhidemenu()
  108. dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
  109. populatemenu(menucontents)
  110.  
  111. if (ie4||ns6){
  112. showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
  113. dropmenuobj.x=getposOffset(obj, "left")
  114. dropmenuobj.y=getposOffset(obj, "top")
  115. dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
  116. dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
  117. }
  118.  
  119. return clickreturnvalue()
  120. }
  121.  
  122. function clickreturnvalue(){
  123. if (ie4||ns6) return false
  124. else return true
  125. }
  126.  
  127. function contains_ns6(a, b) {
  128. while (b.parentNode)
  129. if ((b = b.parentNode) == a)
  130. return true;
  131. return false;
  132. }
  133.  
  134. function dynamichide(e){
  135. if (ie4&&!dropmenuobj.contains(e.toElement))
  136. delayhidemenu()
  137. else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
  138. delayhidemenu()
  139. }
  140.  
  141. function hidemenu(e){
  142. if (typeof dropmenuobj!="undefined"){
  143. if (ie4||ns6)
  144. dropmenuobj.style.visibility="hidden"
  145. }
  146. }
  147.  
  148. function delayhidemenu(){
  149. if (ie4||ns6)
  150. delayhide=setTimeout("hidemenu()",disappeardelay)
  151. }
  152.  
  153. function clearhidemenu(){
  154. if (typeof delayhide!="undefined")
  155. clearTimeout(delayhide)
  156. }
  157.  
  158. if (hidemenu_onclick=="yes")
  159. document.onclick=hidemenu
  160.  
  161. And on the shtml page:
  162.  
  163. <table width="900px" border="1" cellspacing="0" cellpadding="0">
  164. <tr>
  165. <td align="center">
  166.     <a href="/default.shtml">Home</a>
  167. </td>
  168. <td align="center">
  169.     <a href="default.shtml" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu1, '150px')" onMouseOut="delayhidemenu()">Ministries</a>
  170. </td>
  171. <td align="center">
  172.     <a href="/calendar.shtml">Calendar</a>
  173. </td>
  174. <td align="center">
  175.     <a href="/about.shtml">About</a>
  176. </td>
  177. <td align="center">
  178.     <a href="/contact.shtml">Contact Us</a>
  179. </td>
  180. <td align="center">
  181.     <a href="#" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu5, '150px')" onMouseOut="delayhidemenu()">Resources</a>
  182. </td>
  183. </tr>
  184. </table>
  185.  
  186. And the .css:
  187.  
  188. #dropmenudiv{
  189. position:absolute;
  190. border:1px solid black;
  191. border-bottom-width: 0;
  192. font:normal 12px Verdana;
  193. line-height:18px;
  194. z-index:100;
  195. }
  196.  
  197. #dropmenudiv a{
  198. width: 100%;
  199. display: block;
  200. text-indent: 3px;
  201. border-bottom: 1px solid black;
  202. padding: 1px 0;
  203. text-decoration: none;
  204. font-weight: bold;
  205. }
  206.  
  207. #dropmenudiv a:hover{ /*hover background color*/
  208. background-color: #7AD0E1;
  209. }
  210.  
Oct 27 '06 #1
Share this Question
Share on Google+
3 Replies


P: 71
Here's a link to the page with this menu on it:

http://rsteph49.tripod.com/default2.shtml

And here's one with a different dropdown menu. (I actually like this menu, but it doesn't come out right in FireFox, and I haven't been able to get it fixed):

http://rsteph49.tripod.com/default.shtml
Oct 27 '06 #2

P: 71
Anyone have any thoughts on this?
Oct 30 '06 #3

Expert 100+
P: 1,892
For an easy fix could use this menu instead:

DD
Oct 30 '06 #4

Post your reply

Sign in to post your reply or Sign up for a free account.