Making a Menu externally 1

[tjcusick]

I used an online menu maker to create the below code to make a menu for my website. My question is, does anyone know a way to create the Menu externally of the pages so that i do not have to create the menu over and over on each page? I know i could use frames but i really didnt want to use frames? anyone have any suggestions?

Thanks in advance. Tom

<script language="javascript">
window.onerror = null;
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
var menuActive = 0;
var menuOn = 0;
var onLayer;
var timeOn = null;

function showLayer(layerName,aa){
var x =document.getElementById(aa);
var tt =findPosX(x); 
var ww =findPosY(x)+20; 

if (timeOn != null) {
clearTimeout(timeOn);
hideLayer(onLayer);
}
if (IE4) {
var layers = eval('document.all["'+layerName+'"].style');
layers.left = tt;
eval('document.all["'+layerName+'"].style.visibility="visible"');
}
else {
if(document.getElementById){
var elementRef = document.getElementById(layerName);
if((elementRef.style)&& (elementRef.style.visibility!=null)){
elementRef.style.visibility = 'visible';
elementRef.style.left = tt;
elementRef.style.top = ww;
}
}
}
onLayer = layerName
}

function hideLayer(layerName){
if (menuActive == 0)
{
if (IE4){
eval('document.all["'+layerName+'"].style.visibility="hidden"');
} 
else{
if(document.getElementById){
var elementRef = document.getElementById(layerName);
if((elementRef.style)&& (elementRef.style.visibility!=null)){
elementRef.style.visibility = 'hidden';
}
}
}
}
}

function btnTimer() {
timeOn = setTimeout("btnOut()",600)
}

function btnOut(layerName){
if (menuActive == 0){
hideLayer(onLayer)
}
}

var item;
function menuOver(itemName,ocolor){
item=itemName;
itemName.style.backgroundColor = ocolor; //background color change on mouse over 
clearTimeout(timeOn);
menuActive = 1
}

function menuOut(itemName,ocolor){
if(item)
itemName.style.backgroundColor = ocolor;
menuActive = 0
timeOn = setTimeout("hideLayer(onLayer)", 100)
}

function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}

function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}

</script>

<p align="center">  
<table valign="top" cellpadding="0" cellspacing="0" width="750" border="0">
<tr><td bgcolor="#000066">
<table align="center" class="tab"><tr>
<td id="0" align="middle" onmouseout="btnTimer()" onmouseover="showLayer(&quot;Menu0&quot;,'0')" style="COLOR: #ffffff"> <b>Home</b></td>
<td style="COLOR: #ff0000"> &nbsp; || &nbsp; </td><td id="1" align="middle" onmouseout="btnTimer()" onmouseover="showLayer(&quot;Menu1&quot;,'1')" style="COLOR: #ffffff"> <b>Information</b></td>
<td style="COLOR: #ff0000"> &nbsp; || &nbsp; </td><td id="2" align="middle" onmouseout="btnTimer()" onmouseover="showLayer(&quot;Menu2&quot;,'2')" style="COLOR: #ffffff"> <b>Lafayette</b></td>
<td style="COLOR: #ff0000"> &nbsp; || &nbsp; </td><td id="3" align="middle" onmouseout="btnTimer()" onmouseover="showLayer(&quot;Menu3&quot;,'3')" style="COLOR: #ffffff"> <b>Notices</b></td>
<td style="COLOR: #ff0000"> &nbsp; || &nbsp; </td><td id="4" align="middle" onmouseout="btnTimer()" onmouseover="showLayer(&quot;Menu4&quot;,'4')" style="COLOR: #ffffff"> <b>Links</b></td>
</tr></table>

<div id="Menu0" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; VISIBILITY: hidden; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute; z-ndex: 1" 
     >
<table bgcolor="#ffeecc" cellspacing="0" cellpadding="0" style="BORDER-COLLAPSE: collapse">
<tr height="25" onmouseout="menuOut(this,'#ffeecc')" onmouseover="menuOver(this,'#FFFFFF')" 
       >
<td bgcolor="#000066">&nbsp; &nbsp;</td><td align="left">
<a class="asd" href="index.html"> &nbsp;Home &nbsp;</a> &nbsp; &nbsp;</td></tr>
</table></div>
<div id="Menu1" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; VISIBILITY: hidden; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute; z-ndex: 1" 
     >
<table bgcolor="#ffeecc" cellspacing="0" cellpadding="0" style="BORDER-COLLAPSE: collapse">
<tr height="25" onmouseout="menuOut(this,'#ffeecc')" onmouseover="menuOver(this,'#FFFFFF')" 
       >
<td bgcolor="#000066">&nbsp; &nbsp;</td><td align="left">
<a class="asd" href="What%20is%20a%20Mason.htm"> &nbsp;What is a Mason? &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height="25" onmouseout="menuOut(this,'#ffeecc')" onmouseover="menuOver(this,'#FFFFFF')" 
       >
<td bgcolor="#000066">&nbsp; &nbsp;</td><td align="left">
<a class="asd" href="The%20Difference.htm">&nbsp;What do AF&amp;AM, F&amp;AM, &amp; PHA mean? &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height="25" onmouseout="menuOut(this,'#ffeecc')" onmouseover="menuOver(this,'#FFFFFF')" 
       >
<td bgcolor="#000066">&nbsp; &nbsp;</td><td align="left">
<a class="asd" href="Become%20a%20Mason.htm"> &nbsp;Can I become a Mason? &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height="25" onmouseout="menuOut(this,'#ffeecc')" onmouseover="menuOver(this,'#FFFFFF')" 
       >
<td bgcolor="#000066">&nbsp; &nbsp;</td><td align="left">
<a class="asd" href="The%20Holy%20Saints%20John.htm"> &nbsp;What is St. John's Day &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height="25" onmouseout="menuOut(this,'#ffeecc')" onmouseover="menuOver(this,'#FFFFFF')" 
       >
<td bgcolor="#000066">&nbsp; &nbsp;</td><td align="left">
<a class="asd" href="themasonicring.htm"> &nbsp;The Masonic Ring &nbsp;</a> &nbsp; &nbsp;</td></tr>
</table></div>
<div id="Menu2" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; VISIBILITY: hidden; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute; z-ndex: 1" 
     >
<table bgcolor="#ffeecc" cellspacing="0" cellpadding="0" style="BORDER-COLLAPSE: collapse">
<tr height="25" onmouseout="menuOut(this,'#ffeecc')" onmouseover="menuOver(this,'#FFFFFF')" 
       >
<td bgcolor="#000066">&nbsp; &nbsp;</td><td align="left">
<a class="asd" href="MeetingHall.htm"> &nbsp;Our Meeting Hall &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height="25" onmouseout="menuOut(this,'#ffeecc')" onmouseover="menuOver(this,'#FFFFFF')" 
       >
<td bgcolor="#000066">&nbsp; &nbsp;</td><td align="left">
<a class="asd" href="Officers.htm"> &nbsp;Meet the Officers &nbsp;</a> &nbsp; &nbsp;</td></tr>
<tr height="25" onmouseout="menuOut(this,'#ffeecc')" onmouseover="menuOver(this,'#FFFFFF')" 
       >
<td bgcolor="#000066">&nbsp; &nbsp;</td><td align="left">
<a class="asd" href="StandingCommittees.htm"> &nbsp;Standing Committees &nbsp;</a> &nbsp; &nbsp;</td></tr>
</table></div>
<div id="Menu3" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; VISIBILITY: hidden; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute; z-ndex: 1" 
     >
<table bgcolor="#ffeecc" cellspacing="0" cellpadding="0" style="BORDER-COLLAPSE: collapse">
<tr height="25" onmouseout="menuOut(this,'#ffeecc')" onmouseover="menuOver(this,'#FFFFFF')" 
       >
<td bgcolor="#000066">&nbsp; &nbsp;</td><td align="left">
<a class="asd" href="gatekeeper.html"> &nbsp;May Notice &nbsp;</a> &nbsp; &nbsp;</td></tr>
</table></div>
<div id="Menu4" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; VISIBILITY: hidden; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute; z-ndex: 1" 
     >
<table bgcolor="#ffeecc" cellspacing="0" cellpadding="0" style="BORDER-COLLAPSE: collapse">
<tr height="25" onmouseout="menuOut(this,'#ffeecc')" onmouseover="menuOver(this,'#FFFFFF')" 
       >
<td bgcolor="#000066">&nbsp; &nbsp;</td><td align="left">
<a class="asd" href="links.htm"> &nbsp;Links Page &nbsp;</a> &nbsp; &nbsp;</td></tr>
</table></div>
</td></tr></table></p>

 

[mmerlinn]

Not sure exactly what you want to do.

However, I think I would put this code in a .js file on the server and call it from every page.

mmerlinn

http://mmerlinn.com

"Political correctness is the BADGE of a COWARD!"

 

[trollacious]

We've been over this subject a few times in this forum and the HTML one. You can use Server-Side Includes in most, if not all, server-side scripting environments. Find out what your web host provides, then look up include and the server-side technology on Google.

Lee

 

[tjcusick]

Thanks alot for giving me what i needed to actually look up what it is called .. I wasn't sure about the wording of: Server Side Includes. Thanks.

But apparently the web hosting area i am putting my site on does not allow SSI's so I guess I'm stuck with keeping each menu seperate on each page... unless I want to do Frames which i'm not sure that i want to do..

I've heard that frames are not always reliable... is that true?

 

[trollacious]

There are inexpensive web hosts that DO allow server-side scripting, so maybe you should consider moving your site.

Lee

 

[mmerlinn]

I have never had a problem with the reliability of frames.

The biggest issue is that most browsers bookmark/favorite the underlying frame and not the page that is trying to be bookmarked. This can be frustrating for the viewer as he can never go back to exactly the page he THOUGHT he bookmarked.

Second issue is that to use frames you MUST make your pages viewable as a stand-alone page with a way to get back to your framed menu. That is because when the search engines index your page they index what they see and when someone clicks on the site link in the search engine they get served a page WITHOUT your menu.

Third issue is that if you don't carefully code them, you can get a royal mess when trying to navigate your site.

Can you use frames? Yes, but only if you are very careful how you do it.

For an example of how I use frames, click on my link below. Note the robots meta tag in the frames page and the menu pages. You really don't want those pages indexed, although Yahoo and others will still index them while Google does not index them. Also note the link at the bottom of every page which takes the viewer back to the framed pages if the viewer gets the page from Google or wherever. You definitely do NOT want the viewer to get a dead end page from a search engine.

mmerlinn

http://mmerlinn.com

"Political correctness is the BADGE of a COWARD!"

 

[tyutghf]

Maybe an iframe will do the trick?

 

[damber]

why oh why do we go round in circles on this silly subject ?

Just do it properly. Frames for the vast majority of uses are absolutely hideous. There are so many explanations why on this forum alone.

I've never heard of a host that doesn't support Server Side Includes (well, maybe in 1996). Even the free hosting providers offer ssi + server side scripting. Just try adding the following to one of your html files:

<!--#include virtual="/menu.htm" -->

create the menu.htm file in your web root directory with your menu in it, then browse to the page that you put the above include in. If it shows your menu, you're good. If not... change hosts, as you're probably using the worst webhost on the planet.



=======================================
LessThanDot - The IT Community of the 21st Century

A smile is worth a thousand kind words. So smile, it's easy!

 

[tjcusick]

I thought i posted back to this line but apparently not. I did end up using the SSI and coded my menu in a external file and that works great.

Thanks for all the help people.