943,553 Members | Top Members by Rank

Ad:
You are currently viewing page 2 of this multi-page discussion thread; Jump to the first page
Mar 25th, 2009
0

Re: Loading Drop down Menu From External File

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.
Team Colleague
Reputation Points: 92
Solved Threads: 21
Posting Pro in Training
FC Jamison is offline Offline
436 posts
since Jun 2004

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Changing image BG onclick
Next Thread in HTML and CSS Forum Timeline: Odd google maps rendering in IE6/WinXP only





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC