HTML and CSS RSS HTML and CSS RSS

Loading Drop down Menu From External File

Reply
1 2

•
•
Join Date: Jun 2004
Posts: 434
Reputation: FC Jamison is on a distinguished road 
Solved Threads: 20
Team Colleague
FC Jamison's Avatar
FC Jamison FC Jamison is offline Offline
Posting Pro in Training

Re: Loading Drop down Menu From External File

 
0
  #11
Mar 25th, 2009
I included my dropdown menu with the following javascript:

HTML and CSS Syntax (Toggle Plain Text) 
  1. <div id="menubar">
  2. 		<div id="menu"><script type="text/javascript" src="resources/javascripts/menu.js"></script></div>
  3. 		</div>

then the menu.js file was

HTML and CSS Syntax (Toggle Plain Text) 
  1. 	menu();
  2.  
  3. 	/* Begin Menu Items */
  4.  
  5. 	tmenu[1]='Home';
  6. 	tlink[1]="http://www.frankjamison.com";
  7. 	tdesc[1]="Return to my homepage";
  8. 	ttype[1]="static";
  9. 	tiden[1]="";
  10.  
  11. 	tmenu[2]='R&eacute;sum&eacute;';
  12. 	tlink[2]="http://www.frankjamison.com/resume/";
  13. 	tdesc[2]="View my r&eacute;sum&eacute;";
  14. 	ttype[2]="static";
  15. 	tiden[2]="";
  16.  
  17. 	tmenu[3]='Portfolio';
  18. 	tlink[3]="http://www.frankjamison.com/portfolio/";
  19. 	tdesc[3]="View my portfolio";
  20. 	ttype[3]="static";
  21. 	tiden[3]="";
  22.  
  23. 	tmenu[4]='Photo Gallery';
  24. 	tlink[4]="http://www.frankjamison.com/gallery/";
  25. 	tdesc[4]="Visit my photo gallery";
  26. 	ttype[4]="static";
  27. 	tiden[4]="";
  28.  
  29. 	tmenu[5]='Poetry';
  30. 	tlink[5]="http://www.frankjamison.com/poetry/";
  31. 	tdesc[5]="Read my poetry";
  32. 	ttype[5]="static";
  33. 	tiden[5]="";
  34.  
  35. 	tmenu[6]='Blog';
  36. 	tlink[6]="http://www.frankjamison.com/blog/";
  37. 	tdesc[6]="View my blog";
  38. 	ttype[6]="static";
  39. 	tiden[6]="";
  40.  
  41. 	tmenu[7]='Contact';
  42. 	tlink[7]="http://www.frankjamison.com/contact/";
  43. 	tdesc[7]="Contact me";
  44. 	ttype[7]="static";
  45. 	tiden[7]="lastMenu";
  46.  
  47. 	/* Thank you to Suckerfish & Patrick Griffiths for this code snippet */
  48. 	showMenu = function() {
  49. 		var subMenuItems = document.getElementById("topMenu").getElementsByTagName("li");
  50. 		for (var i=0; i<subMenuItems.length; i++) {
  51. 			subMenuItems[i].onmouseover=function() {
  52. 				this.className+=" showMenu";
  53. 			}
  54. 			subMenuItems[i].onmouseout=function() {
  55. 				this.className=this.className.replace(new RegExp(" showMenu\\b"), "");
  56. 			}
  57. 		}
  58. 	}
  59.  
  60. 	if (window.attachEvent) window.attachEvent("onload", showMenu);
  61.  
  62. 	/* Create Menu Arrays */
  63. 	function menu() {
  64. 		tmenu = new Array();
  65. 		tlink = new Array();
  66. 		tdesc = new Array();
  67. 		ttype = new Array();
  68. 		tiden = new Array();
  69. 	}
  70.  
  71. 	/* Create Dynamic Menu Length Variable */
  72. 	var MENU = tmenu.length;
  73.  
  74. 	document.write('<div id="menu"> ');
  75. 	document.write('	<ul id="topMenu"> ');
  76. 	for (i=1; i < MENU; i++){
  77. 		if (ttype[i] == "dropdown") {
  78. 			document.write('<li class="topMenuLink"><a href="'+tlink[i]+'" class="'+ttype[i]+'" id="'+tiden[i]+'" title="'+tdesc[i]+'">'+tmenu[i][0]+'</a>');
  79. 			if (tiden[i] == "lastMenu") {
  80. 				document.write('<ul class="subMenu" id="last">');
  81. 			}
  82. 			else {
  83. 				document.write('<ul class="subMenu">');
  84. 			}
  85. 			for(j=1; j<tmenu[i].length; j++) {
  86. 				document.write('<li class="subMenuLink"> '+tmenu[i][j]+'</li> ');
  87. 			}
  88. 			document.write('</ul> </li> ');
  89. 		}
  90. 		else {
  91. 			document.write('		<li class="topMenuLink"> ');
  92. 			document.write('			<a href="'+tlink[i]+'" class="'+ttype[i]+'" id="'+tiden[i]+'" title="'+tdesc[i]+'"> '+tmenu[i]+'</a> ');
  93. 			document.write('		</li> ');
  94. 		}
  95. 	}
  96. 	document.write('	</ul> ');
  97. 	document.write('</div> ');

I also included a footer using the same method and the document.write javascript as follows...

in the html file i added:

HTML and CSS Syntax (Toggle Plain Text) 
  1. <script type="text/javascript" src="resources/javascripts/footer.js"></script>

and my footer.js file is:

HTML and CSS Syntax (Toggle Plain Text) 
  1. <!-- Start JavaScript Code 
  2.  
  3. 	// Script: Website Footer
  4. 	// Author: Frank Jamison
  5. 	// Date  : December 14, 2007
  6.  
  7. 	// Stylesheets: stylesheet.css
  8. 	// Images     : button_xhtml11.png
  9.  
  10.  
  11. 	/* Write Footer Section to Web Page */
  12. 	document.write('<div id="copyright">
  13. ');
  14. 	document.write('&copy;Copyright 2006-2008 All rights reserved<br>');
  15. 	document.write('<a href="http://www.frankjamison.com/" class="footerlink" title="Return to my home page">Frank C Jamison</a> ');
  16. 	document.write('/');
  17. 	document.write(' <a href="http://wwww.frankjamison.com/contact/" class="footerlink" title="Contact Frank Jamison">Contact</a><br>');
  18. 	document.write('</div>');
  19.  
  20. 	document.write('<div id="w3cvalid">');
  21. 	document.write('<a href="http://validator.w3.org/check?uri=referer" target="new" title="Check the W3C validation for yourself!"><img src="http://www.frankjamison.com/resources/images/button_xhtml11.png" alt="Valid XHTML 1.1" height="31" width="88" /></a><br /> ');
  22. 	document.write('</div>');
  23.  
  24. // End JavaScript Code -->

I hope that helps.
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC