I included my dropdown menu with the following javascript
:
<div id="menubar">
<div id="menu"><script type="text/javascript" src="resources/javascripts/menu.js"></script></div>
</div>
then the menu.js file was
menu();
/* Begin Menu Items */
tmenu[1]='Home';
tlink[1]="http://www.frankjamison.com";
tdesc[1]="Return to my homepage";
ttype[1]="static";
tiden[1]="";
tmenu[2]='Résumé';
tlink[2]="http://www.frankjamison.com/resume/";
tdesc[2]="View my résumé";
ttype[2]="static";
tiden[2]="";
tmenu[3]='Portfolio';
tlink[3]="http://www.frankjamison.com/portfolio/";
tdesc[3]="View my portfolio";
ttype[3]="static";
tiden[3]="";
tmenu[4]='Photo Gallery';
tlink[4]="http://www.frankjamison.com/gallery/";
tdesc[4]="Visit my photo gallery";
ttype[4]="static";
tiden[4]="";
tmenu[5]='Poetry';
tlink[5]="http://www.frankjamison.com/poetry/";
tdesc[5]="Read my poetry";
ttype[5]="static";
tiden[5]="";
tmenu[6]='Blog';
tlink[6]="http://www.frankjamison.com/blog/";
tdesc[6]="View my blog";
ttype[6]="static";
tiden[6]="";
tmenu[7]='Contact';
tlink[7]="http://www.frankjamison.com/contact/";
tdesc[7]="Contact me";
ttype[7]="static";
tiden[7]="lastMenu";
/* Thank you to Suckerfish & Patrick Griffiths for this code snippet */
showMenu = function() {
var subMenuItems = document.getElementById("topMenu").getElementsByTagName("li");
for (var i=0; i<subMenuItems.length; i++) {
subMenuItems[i].onmouseover=function() {
this.className+=" showMenu";
}
subMenuItems[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" showMenu\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", showMenu);
/* Create Menu Arrays */
function menu() {
tmenu = new Array();
tlink = new Array();
tdesc = new Array();
ttype = new Array();
tiden = new Array();
}
/* Create Dynamic Menu Length Variable */
var MENU = tmenu.length;
document.write('<div id="menu"> ');
document.write(' <ul id="topMenu"> ');
for (i=1; i < MENU; i++){
if (ttype[i] == "dropdown") {
document.write('<li class="topMenuLink"><a href="'+tlink[i]+'" class="'+ttype[i]+'" id="'+tiden[i]+'" title="'+tdesc[i]+'">'+tmenu[i][0]+'</a>');
if (tiden[i] == "lastMenu") {
document.write('<ul class="subMenu" id="last">');
}
else {
document.write('<ul class="subMenu">');
}
for(j=1; j<tmenu[i].length; j++) {
document.write('<li class="subMenuLink"> '+tmenu[i][j]+'</li> ');
}
document.write('</ul> </li> ');
}
else {
document.write(' <li class="topMenuLink"> ');
document.write(' <a href="'+tlink[i]+'" class="'+ttype[i]+'" id="'+tiden[i]+'" title="'+tdesc[i]+'"> '+tmenu[i]+'</a> ');
document.write(' </li> ');
}
}
document.write(' </ul> ');
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:
<script type="text/javascript" src="resources/javascripts/footer.js"></script>
and my footer.js file is:
<!-- Start JavaScript Code
// Script: Website Footer
// Author: Frank Jamison
// Date : December 14, 2007
// Stylesheets: stylesheet.css
// Images : button_xhtml11.png
/* Write Footer Section to Web Page */
document.write('<div id="copyright">
');
document.write('©Copyright 2006-2008 All rights reserved<br>');
document.write('<a href="http://www.frankjamison.com/" class="footerlink" title="Return to my home page">Frank C Jamison</a> ');
document.write('/');
document.write(' <a href="http://wwww.frankjamison.com/contact/" class="footerlink" title="Contact Frank Jamison">Contact</a><br>');
document.write('</div>');
document.write('<div id="w3cvalid">');
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 /> ');
document.write('</div>');
// End JavaScript Code -->
I hope that helps.