Table based menu

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:40

Table based menu

Poster: Fazoli
Dated: Friday March 2 2007 - 18:10:02 GMT

I'm having real problems with embedding the menu into a table cell for my website. I've read and tried one of the ways it was fixed here but it didn't work. I noticed that there was a filed named embedded_table_menu.js and was wondering if that was what i needed for this to work. Here is the code for my website if anyone can give me somehelp.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Kinard Junior High School</title>   

<style type="text/css">
<!--
.style3 {
   color: #000066;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   font-size: 18px;
}
body {
   background-image: url(images/index_bar.jpg);
   background-repeat: no-repeat;
}
-->
</style>
<link href="CSS/KinardMainStyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
   color: #020098;
}
a:visited {
   color: #993399;
}
-->
</style></head>

<head>
<style type="text/css">

#dropmenudiv{
position:absolute;

border-bottom-width: 0;
font: 10px Tahoma;
 color="#white";
z-index:100;
}

#dropmenudiv a{
width: 120%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: ;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: white;
}

</style>

<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Home</title>
<style>
<!--
 p.MsoNormal
   {mso-style-parent:"";
   margin-bottom:.0001pt;
   font-size:14.0pt;
   font-family:"Tahoma";
   margin-left:0in; margin-right:0in; margin-top:0in}
.style21 {color: #0007FD; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; }
.style22 {color: #000000}
.style24 {color: #000000; font-size: 12px; }
.style25 {font-size: 9px}
-->
</style>
</head>

<body>

<SCRIPT type="text/javascript" src="Table Based Menu_files/milonic_src.js"></SCRIPT> 
<noscript><a href="http://www.milonic.com/">DHTML Menu JavaScript Menu Powered by Milonic</a></noscript> 
<script type="text/javascript">
<!-- 
if(ns4)_d.write("<SCR"+"IPT LANGUAGE=JavaScript SRC=newjava/mmenuns4.js><\/SCR"+"IPT>"); 
else _d.write("<SCR"+"IPT LANGUAGE=JavaScript SRC=newjava/mmenudom.js><\/SCR"+"IPT>"); 
-->
</SCRIPT>

<table width="935" height="716">
  <tr>
    <td width="131" rowspan="4"><p> </p>
    <p align="center"><img src="images/front_student_2.jpg" width="117" height="153" /></p>
    <p align="center"><img src="images/front_student_1.jpg" width="120" height="89" /></p></td>
    <td height="244"><img src="images/Untitled-1.jpg" width="461" height="242" align="top" /><a href="community/6thgradeMarchTransitionMeet.htm"></a></td>
    <td height="244"><img src="images/building1.jpg" width="279" height="209" /></td>
  </tr>
  <tr>
    <td>
      <SCRIPT type="text/javascript" src="newjava/menu_data.js"></SCRIPT>   </td>
  </tr>
  <tr>
    <td height="33" colspan="2" class="style3">
   <!--This row is to leave space for the drop down menus so text isnt covered.-->
    </td>
  </tr>
  <tr>
    <td width="462" height="276" valign="top" class="style3"><p>Recent News</p>
      <p><a href="parentINFOnight.htm" class="newslinks">Important Parent Night!</a><br />
          <span class="bodystyle style22">Jan. 16th - Incoming 7th Graders 07-08</span> <br />
          <a href="firstSemesterclebrations.htm" class="newslinks">First Semester Updates</a><br />
          <span class="style24">Celebrations</span><br />
          <a href="trafficFlowupdate.htm" class="newslinks">Traffic Flow Update</a><br />
          <span class="style24">Tips for improving drop-off/pick-up</span> <br />
          <a href="mustangMemo.htm" class="newslinks">Mustang Memo</a><br />
          <span class="style24">Athletics/Clubs Week of Jan. 15 </span><br />
          <a href="athleticCelebrations.htm" class="newslinks">Athletics</a><br />
          <span class="style24">Celebrations</span> <br />
    </p></td>
    <td width="326" class="style3"><p class="style25"><a href="hatsScarves.htm" class="newslinks">Service Learning Project</a><br />
        <span class="style24">Hats and Scarves </span><br />
        <a href="scienceOlympiad.htm" class="newslinks">Science Olympiad</a><br />
        <span class="style24">Looking for Kinard Community Support</span><br />
        <a href="../downloads/PSD 9th Grade Parents.pdf" class="newslinks">PSD Calendar</a><br />
        <span class="style24">High School Registration Info/Meetings</span><br />
        <a href="../downloads/scholarship.pdf" class="newslinks">College in Colorado</a><br />
        <span class="style24">Scholarship Application</span><br />
        <a href="clubsCelebrations.htm" class="newslinks">Clubs</a><br />
        <span class="style24">Celebrations </span><br />
        <a href="yearbookAds.htm" class="newslinks">Kinard Yearbook</a><br />
        <span class="style24">Purchasing Yearbook / BABY Ads </span><br />
        <br />
    <a class="newslinks" href="archives.htm">Archived news >></a> </p></td>
  </tr>
  <tr>
    <td height="41" colspan="3">      <div align="center" class="footer">
        <hr>
© Kinard Junior High 2006 | 
<a target="_blank" href="http://www.psdschools.org/misc/privacy.aspx?affid=10">Privacy Policy</a> | 
<a href="../front/contactKinardJH.htm">Contact Kinard School</a> | 
<a href="georg __at__ cs.colostate.edu?subject=Kinard Website Corrections/Updates">Corrections</a> | 
<a href="brhartley __at__ comcast.net?subject=Comments on the Kinard Website">Contact Kinard Webmaster</a> | 
Page Last Updated:
        <!-- #BeginDate format:Am2 -->3/2/07<!-- #EndDate -->
        <br>
        <a href="http://www.psdschools.org/" target="_blank"><img src="images/psd60.gif" width="60" height="60" /></a></div>       </td>
  </tr>
</table>

 
</body>


</html>

Poster: Ruth
Dated: Friday March 2 2007 - 18:26:55 GMT

Hi,

We need to see your page and all your files.

embedded_table_menu.js is just the name someone gave their main menu file which is embedded in the table.

Open your data file, cut out the main menu and put it into it's own file, add a drawMenus(); at the end, remove the top=; and left=; from the menu and add position='relative'; instead. Now save the file, call it whatever you want.

You now have two files, the original menu_data.js file which no longer has a main menu in it and still has a drawMenus(); at the end, and your data file for the main menu you just made that also has a drawMenus() at the end.

Now on your page, call all but the main menu file immediately after the body tag

Code:

<SCRIPT type="text/javascript" src="Table Based Menu_files/milonic_src.js"></SCRIPT> 
<noscript><a href="http://www.milonic.com/">DHTML Menu JavaScript Menu Powered by Milonic</a></noscript> 
<script type="text/javascript"> 
<!-- 
if(ns4)_d.write("<SCR"+"IPT LANGUAGE=JavaScript SRC=newjava/mmenuns4.js><\/SCR"+"IPT>"); 
else _d.write("<SCR"+"IPT LANGUAGE=JavaScript SRC=newjava/mmenudom.js><\/SCR"+"IPT>"); 
--> 
</SCRIPT> 
<SCRIPT type="text/javascript" src="Table Based Menu_files/menu_data.js"></SCRIPT> 

And call the main menu file, whatever you named it, in the table cell.

If after having done this you are still having problems we will need the page itself so we can see all the coding, page, css and menu.

Ruth

Poster: Fazoli
Dated: Tuesday March 6 2007 - 18:01:34 GMT

Ok, so i tried what you suggested and it still isn't working (not even showing up on the page)

what do you want me to send you so you can figure out the problem?

Poster: Ruth
Dated: Tuesday March 6 2007 - 18:31:39 GMT

Hi,

Can you put up a test page? If not, we need to you put your html page code, any css code, the menu_data file here so we can try an make a page and test it.

Ruth

Poster: Fazoli
Dated: Tuesday March 6 2007 - 18:45:07 GMT

ok, the test page should be up before the end of the week, so i'll let you know when its available to see.

Poster: Ruth
Dated: Wednesday March 21 2007 - 5:19:58 GMT

Hi,

I just noticed that you haven't posted a test page, but I was working with the downloaded menu and set something up for you to try.

This is the main menu file, copy and save it as embed_main.js

Code:

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
position='relative';
aI("text=Home;url=http://www.milonic.com/;");
aI("showmenu=Milonic;text=Milonic;");
aI("showmenu=Partners;text=Partners;");
aI("showmenu=Links;text=Links;");
aI("showmenu=MyMilonic;text=My Milonic;");
}

drawMenus();

This is the menu_data.js file, copy and save it as subs_data.js

Code:

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;

with(menuStyle=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#eeeeee";
offcolor="#000000";
onbgcolor="#ddffdd";
oncolor="#000099";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#999999";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
}



with(milonic=new menuname("Milonic")){
style=menuStyle;
orientation="horizontal";
aI("text=Product Purchasing Page;url=http://www.milonic.com/cbuy.php;");
aI("text=Contact Us;url=http://www.milonic.com/contactus.php;");
aI("text=Newsletter Subscription;url=http://www.milonic.com/newsletter.php;");
aI("text=FAQ;url=http://www.milonic.com/menufaq.php;");
aI("text=Discussion Forum;url=http://www.milonic.com/forum/;");
aI("text=Software License Agreement;url=http://www.milonic.com/license.php;");
aI("text=Privacy Policy;url=http://www.milonic.com/privacy.php;");
}

with(milonic=new menuname("Partners")){
style=menuStyle;
orientation="horizontal";
aI("text=(aq) Web Hosting;url=http://www.a-q.co.uk/;");
aI("text=WebSmith;url=http://www.softidiom.com/?milonicmenu;");
aI("text=SMS 2 Email;url=http://www.sms2email.com/;");
}

with(milonic=new menuname("Links")){
style=menuStyle;
orientation="horizontal";
aI("text=Apache Web Server;url=http://www.apache.org/;");
aI("text=MySQL Database Server;url=http://ww.mysql.com/;");
aI("text=PHP - Development;url=http://www.php.net/;");
aI("text=phpBB Web Forum System;url=http://www.phpbb.net/;");
aI("showmenu=Anti Spam;text=Anti Spam Tools;");
}

with(milonic=new menuname("Anti Spam")){
style=menuStyle;
orientation="horizontal";
aI("text=Spam Cop;url=http://www.spamcop.net/;");
aI("text=Mime Defang;url=http://www.mimedefang.org/;");
aI("text=Spam Assassin;url=http://www.spamassassin.org/;");
}

with(milonic=new menuname("MyMilonic")){
style=menuStyle;
orientation="horizontal";
aI("text=Login;url=http://www.milonic.com/login.php;");
aI("text=Licenses;url=http://www.milonic.com/mylicenses.php;");
aI("text=Invoices;url=http://www.milonic.com/myinvoices.php;");
aI("text=Make Support Request;url=http://www.milonic.com/reqsupport.php;");
aI("text=View Support Requests;url=http://www.milonic.com/mysupport.php;");
aI("text=Your Details;url=http://www.milonic.com/mydetails.php;");
}

drawMenus();

This is your page with these files called on it.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Language" content="en-us"> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
<title>Kinard Junior High School</title>    

<style type="text/css"> 
<!-- 
.style3 { 
   color: #000066; 
   font-family: Arial, Helvetica, sans-serif; 
   font-weight: bold; 
   font-size: 18px; 
} 
body { 
   background-image: url(images/index_bar.jpg); 
   background-repeat: no-repeat; 
} 
--> 
</style> 
<link href="CSS/KinardMainStyle.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
<!-- 
a:link { 
   color: #020098; 
} 
a:visited { 
   color: #993399; 
} 
--> 
</style>
<style type="text/css"> 

#dropmenudiv{ 
position:absolute; 

border-bottom-width: 0; 
font: 10px Tahoma; 
 color="#white"; 
z-index:100; 
} 

#dropmenudiv a{ 
width: 120%; 
display: block; 
text-indent: 3px; 
border-bottom: 1px solid black; 
padding: 1px 0; 
text-decoration: none; 
font-weight: ; 
} 

#dropmenudiv a:hover{ /*hover background color*/ 
background-color: white; 
} 
</style> 


<style> 
<!-- 
 p.MsoNormal 
   {mso-style-parent:""; 
   margin-bottom:.0001pt; 
   font-size:14.0pt; 
   font-family:"Tahoma"; 
   margin-left:0in; margin-right:0in; margin-top:0in} 
.style21 {color: #0007FD; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; } 
.style22 {color: #000000} 
.style24 {color: #000000; font-size: 12px; } 
.style25 {font-size: 9px} 
--> 
</style> 
</head> 

<body> 
<SCRIPT type="text/javascript" src="milonic_src.js"></SCRIPT> 
<noscript><a href="http://www.milonic.com/">DHTML Menu JavaScript Menu Powered by Milonic</a></noscript> 
<script type="text/javascript"> 
<!-- 
if(ns4)_d.write("<SCR"+"IPT LANGUAGE=JavaScript SRC=mmenuns4.js><\/SCR"+"IPT>"); 
else _d.write("<SCR"+"IPT LANGUAGE=JavaScript SRC=mmenudom.js><\/SCR"+"IPT>"); 
--> 
</SCRIPT> 
<SCRIPT type="text/javascript" src="subs_data.js"></SCRIPT>
<table width="935" height="716"> 
  <tr> 
    <td width="131" rowspan="4"><p> </p> 
    <p align="center"><img src="images/front_student_2.jpg" width="117" height="153" /></p> 
    <p align="center"><img src="images/front_student_1.jpg" width="120" height="89" /></p></td> 
    <td height="244"><img src="images/Untitled-1.jpg" width="461" height="242" align="top" /><a href="community/6thgradeMarchTransitionMeet.htm"></a></td> 
    <td height="244"><img src="images/building1.jpg" width="279" height="209" /></td> 
  </tr> 
  <tr> 
    <td> 
      <SCRIPT type="text/javascript" src="embed_main.js"></SCRIPT>   </td> 
  </tr> 
  <tr> 
    <td height="33" colspan="2" class="style3"> 
   <!--This row is to leave space for the drop down menus so text isnt covered.--> 
    </td> 
  </tr> 
  <tr> 
    <td width="462" height="276" valign="top" class="style3"><p>Recent News</p> 
      <p><a href="parentINFOnight.htm" class="newslinks">Important Parent Night!</a><br /> 
          <span class="bodystyle style22">Jan. 16th - Incoming 7th Graders 07-08</span> <br /> 
          <a href="firstSemesterclebrations.htm" class="newslinks">First Semester Updates</a><br /> 
          <span class="style24">Celebrations</span><br /> 
          <a href="trafficFlowupdate.htm" class="newslinks">Traffic Flow Update</a><br /> 
          <span class="style24">Tips for improving drop-off/pick-up</span> <br /> 
          <a href="mustangMemo.htm" class="newslinks">Mustang Memo</a><br /> 
          <span class="style24">Athletics/Clubs Week of Jan. 15 </span><br /> 
          <a href="athleticCelebrations.htm" class="newslinks">Athletics</a><br /> 
          <span class="style24">Celebrations</span> <br /> 
    </p></td> 
    <td width="326" class="style3"><p class="style25"><a href="hatsScarves.htm" class="newslinks">Service Learning Project</a><br /> 
        <span class="style24">Hats and Scarves </span><br /> 
        <a href="scienceOlympiad.htm" class="newslinks">Science Olympiad</a><br /> 
        <span class="style24">Looking for Kinard Community Support</span><br /> 
        <a href="../downloads/PSD 9th Grade Parents.pdf" class="newslinks">PSD Calendar</a><br /> 
        <span class="style24">High School Registration Info/Meetings</span><br /> 
        <a href="../downloads/scholarship.pdf" class="newslinks">College in Colorado</a><br /> 
        <span class="style24">Scholarship Application</span><br /> 
        <a href="clubsCelebrations.htm" class="newslinks">Clubs</a><br /> 
        <span class="style24">Celebrations </span><br /> 
        <a href="yearbookAds.htm" class="newslinks">Kinard Yearbook</a><br /> 
        <span class="style24">Purchasing Yearbook / BABY Ads </span><br /> 
        <br /> 
    <a class="newslinks" href="archives.htm">Archived news >></a> </p></td> 
  </tr> 
  <tr> 
    <td height="41" colspan="3">      <div align="center" class="footer"> 
        <hr> 
© Kinard Junior High 2006 | 
<a target="_blank" href="http://www.psdschools.org/misc/privacy.aspx?affid=10">Privacy Policy</a> | 
<a href="../front/contactKinardJH.htm">Contact Kinard School</a> | 
<a href="georg __at__ cs.colostate.edu?subject=Kinard Website Corrections/Updates">Corrections</a> | 
<a href="brhartley __at__ comcast.net?subject=Comments on the Kinard Website">Contact Kinard Webmaster</a> | 
Page Last Updated: 
        <!-- #BeginDate format:Am2 -->3/2/07<!-- #EndDate --> 
        <br> 
        <a href="http://www.psdschools.org/" target="_blank"><img src="images/psd60.gif" width="60" height="60" /></a></div>       </td> 
  </tr> 
</table> 
</body> 
</html> 

That should do it. I made the submenus horizontal since you had noted on the page that the 33px high space was for them to open.

Ruth

Industrial Strength JavaScript and DHTML Menus

Table based menu