Feedback on menu

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

Feedback on menu

Poster: glenp
Dated: Thursday June 29 2006 - 2:41:30 BST

I'm getting reports from a couple of people that the menu on this page is either non-existent, or misaligned though I cannot replicate the problem on my end.

Have tried IE (Mac and PC), Mozilla Firefox and Safari with no issues that I can see of, so I'm stumped.

It's at http://www.port32.com. - any feedback would be greatly appreciated.

GP

Poster: Ruth
Dated: Thursday June 29 2006 - 18:34:35 BST

Hi,

OK, since you are trying to have the menu become part of that logo, you really should be using a table based so it always remains in the same place. Different browsers can be off by a couple of px and that can make the menu look as if it's off.

Try the following and see if that will serve. I made it from your page. The first code is the page. It is of course a .htm page since I have no clue on asp

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML 
xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Welcome to Port 32</TITLE>
<META 
content="Port 32 is an adult lifestyle community located in the beautiful village of Bobcaygeon, Ontario and the City of Kawartha ." 
name=Description>
<META 
content="Port 32,Bobcaygeon,R2000,Adult lifestyle,Retirement,Kawarthas,Pigeon Lake,City of Kawartha Lakes" 
name=Keywords>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><LINK 
href="site.css" type=text/css rel=stylesheet>
<SCRIPT language=JavaScript src="milonic_src.js" 
type=text/javascript></SCRIPT>

<SCRIPT language=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>");

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</SCRIPT>
<!-- FlashObject embed by Geoff Stearns geoff __at__ deconcept.com http://blog.deconcept.com/ -->
<SCRIPT language=JavaScript src="flashobject.js" 
type=text/javascript></SCRIPT>

<SCRIPT language=JavaScript src="menu_data_table.js" type=text/javascript></SCRIPT>
  <META content="MSHTML 5.50.4807.2300" name=GENERATOR>
  
  
</HEAD>
<BODY onload="MM_preloadImages('index_r1_c3_f2.jpg','index_r3_c3_f2.jpg','index_r5_c3_f2.jpg')">
<TABLE  BORDER=1 bordercolor="#FFFF00" CELLSPACING="0" CELLPADDING="0" ALIGN="center" WIDTH="810">
  <TR>
    <TD vAlign=top width=25 background=content_left.jpg><IMG height=97 src="content_topleft.jpg"
     width=25></TD>
    <TD width="760" style="padding:0px"><TABLE width="760"  BORDER=1 bordercolor="#FF00FF" cellpadding=0
      cellspacing=0>
   <TR>
     <TD COLSPAN=3><IMG height=97 src="content_top.jpg" width=760></TD>
   </TR>
   <TR>
     <TD width="301" class="menucell"><script>with(milonic=new menuname("Main Left")){
style=menuStyle;
top=97;
align="left";
alwaysvisible=1;
orientation="horizontal";
position="relative";
menuwidth="100%";
aI("image=nav_left_corner.jpg;");
aI("image=nav_Home.jpg;overimage=nav_Home_f2.jpg;url=index.asp;");
aI("showmenu=The Homes;image=nav_thehomes.jpg;overimage=nav_thehomes_f2.jpg;");
aI("showmenu=Community;image=nav_community.jpg;overimage=nav_community_f2.jpg;");
}
drawMenus();
</script>
</TD>
     <TD width="154"><IMG SRC="content_nav_bgcenter.jpg" WIDTH="154" HEIGHT="31"
      BORDER="0" ALIGN="Top"></TD>
     <TD width="305"  class="menucell"><script>with(milonic=new menuname("Main Right")){
style=menuStyle;
top=97;
align="left";
alwaysvisible=1;
orientation="horizontal";
position="relative";
menuwidth="100%";
aI("showmenu=Village;image=nav_village.jpg;overimage=nav_village_f2.jpg;");
aI("showmenu=Builder;image=nav_builder.jpg;overimage=nav_builder_f2.jpg;");
aI("image=nav_contact.jpg;overimage=nav_contact_f2.jpg;url=contact.asp;");
}
drawMenus();
</script></TD>
   </TR>
   <TR>
     <TD COLSPAN=3 bgColor="#ffffff"> <DIV id=index>
            <DIV align=center><!-- this appears if user doesn't have JavaScript enabled, or doesn't have the required Flash Player version -->
            <P align=center>Please upgrade to the latest version of <A 
            target=_blank 
            href="http://www.macromedia.com/go/getflashplayer/">Flash 
            Player</A>.</P>
            <P align=center><A 
            href="http://www.port32.com/index.asp?detectflash=false">Click 
            here</A> if you already have Flash Player installed.</P></DIV></DIV>
            <DIV align=center>
            <SCRIPT type=text/javascript>
   // <![CDATA[

   var fo = new FlashObject("index.swf", "myMovie", "760", "298", "8", "#001C3E");
   fo.write("index");

   // ]]>
            </SCRIPT>
            </DIV>
     </TD>
   </TR>
   <TR>
     <TD COLSPAN=3 bgColor="#ffffff"><IMG height=8 src="spacer.gif" width=760></TD>
   </TR>
      </TABLE>
    </TD>
    <TD vAlign=top width=25 background=content_right.jpg><SPAN class=shadowright><IMG
     height=97 src="content_topright.jpg" width=25></SPAN></TD>
  </TR>
</TABLE>
<TABLE  BORDER=1 bordercolor="#FF6600" CELLSPACING="0" CELLPADDING="0" ALIGN="center" WIDTH="810">
  <TR>
    <TD vAlign=top width=25 background=content_left.jpg><IMG height=97 src="content_topleft.jpg"
     width=25><SPAN class=shadowleft><SPAN class=shadowright><IMG height=166 src="spacer.gif"
     width=25></SPAN></SPAN></TD>
    <TD vAlign=top width=760><TABLE BORDER=0 CELLSPACING="0" CELLPADDING="0"
      WIDTH="760">
   <TR>
     <TD bgColor=#ffffff><DIV align=center>
         <TABLE cellSpacing=0 cellPadding=0 width=744 BORDER=0>
      <!-- fwtable fwsrc="index.png" fwbase="index.jpg" fwstyle="Dreamweaver" fwdocid
      = "1290205002" fwnested="0" -->
      <TR>
        <TD><IMG height=1 alt="" src="spacer(1).gif"
         width=429 BORDER=0></TD>
        <TD><IMG height=1 alt="" src="spacer(1).gif"
         width=9 BORDER=0></TD>
        <TD><IMG height=1 alt="" src="spacer(1).gif"
         width=306 BORDER=0></TD>
        <TD><IMG height=1 alt="" src="spacer(1).gif"
         width=1 BORDER=0></TD>
      </TR>
      <TR>
        <TD rowSpan=5><IMG id=index_r1_c1 height=327 alt="" src="index_r1_c1.gif"
         width=430 BORDER=0 name=index_r1_c1></TD>
        <TD rowSpan=5><IMG id=index_r1_c2 height=327 alt="" src="index_r1_c2.jpg"
         width=9 BORDER=0 name=index_r1_c2></TD>
        <TD><A onmouseover="MM_swapImage('index_r1_c3','','index_r1_c3_f2.jpg',1);"
         onmouseout=MM_swapImgRestore() href="http://www.port32.com/thehomes_plans.asp"><IMG
         id=index_r1_c3 height=100 alt="" src="index_r1_c3.jpg" width=306 BORDER=0
         name=index_r1_c3></A></TD>
        <TD><IMG height=100 alt="" src="spacer(1).gif"
         width=1 BORDER=0></TD>
      </TR>
      <TR>
        <TD><IMG id=index_r2_c3 height=8 alt="" src="index_r2_c3.jpg" width=306 BORDER=0
         name=index_r2_c3></TD>
        <TD><IMG height=8 alt="" src="spacer(1).gif"
         width=1 BORDER=0></TD>
      </TR>
      <TR>
        <TD><A onmouseover="MM_swapImage('index_r3_c3','','index_r3_c3_f2.jpg',1);"
         onmouseout=MM_swapImgRestore() href="http://www.port32.com/community_lifestyle.asp"><IMG
         id=index_r3_c3 height=101 alt="" src="index_r3_c3.jpg" width=306 BORDER=0
         name=index_r3_c3></A></TD>
        <TD><IMG height=101 alt="" src="spacer(1).gif"
         width=1 BORDER=0></TD>
      </TR>
      <TR>
        <TD><IMG id=index_r4_c3 height=8 alt="" src="index_r4_c3.jpg" width=306 BORDER=0
         name=index_r4_c3></TD>
        <TD><IMG height=8 alt="" src="spacer(1).gif"
         width=1 BORDER=0></TD>
      </TR>
      <TR>
        <TD><A onmouseover="MM_swapImage('index_r5_c3','','index_r5_c3_f2.jpg',1);"
         onmouseout=MM_swapImgRestore() href="http://www.port32.com/village_Bobcaygeon.asp"><IMG
         id=index_r5_c3 height=110 alt="" src="index_r5_c3.jpg" width=306 BORDER=0
         name=index_r5_c3></A></TD>
        <TD><IMG height=110 alt="" src="spacer(1).gif"
         width=1 border=0></TD>
      </TR>
         </TABLE>
       </DIV>
     </TD>
   </TR>
      </TABLE>
    </TD>
    <TD vAlign=top width=25 background=content_right.jpg><SPAN class=shadowright><IMG
     height=97 src="content_topright.jpg" width=25><IMG height=166 src="spacer.gif"
     width=25></SPAN></TD>
  </TR>
  <TR>
    <TD background=content_left.jpg colSpan=3><IMG height=26 src="content_footer.jpg"
     width=810></TD>
  </TR>
</TABLE>
<P>
//
</BODY></HTML>

This is the new menu_data.js file. Save it as menu_data_table.js which is wht is coded as the call on the above page. The main menus are on the page inside table cells, there are two if you look at the page code.

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()){
//align='left';
onbgcolor="#1A5895";
oncolor="white";
//background
offbgcolor="#154778";
offcolor="#ffffff";
//bordercolor="#ffffff";
//borderstyle="solid";
borderwidth=0;
separatorcolor="#ffffff";
separatorsize="0";
padding=5;   
fontsize="11px";
fontstyle="normal";
fontfamily="Georgia, Tahoma, Arial";
// what color top menu item is when page is selected
pagecolor="#ffffff";
pagebgcolor="#ffffff";
headercolor="#ffffff";
headerbgcolor="ffffff";
//subimage="http://www.flexfoil.com/menu/separator.jpg";
//subimagepadding="8";
overfilter="Fade(duration=0.2);Alpha(opacity=100);";
//outfilter="randomdissolve(duration=0.3)";
bgimage='nav_pics/background.jpg';
menubgimage="menubg.jpg";

}

with(submenuStyle=new mm_style()){
bordercolor="#154778";
borderstyle="solid";
borderwidth=1;
fontfamily="Georgia, Tahoma, Arial";
fontsize="8pt";
fontstyle="normal";
fontweight="normal";
headercolor="#000000";
offbgcolor="#154778";
offcolor="#ffffff";
onbgcolor="#1A5895";
oncolor="white";
outfilter="fade(duration=0.5)";
overfilter="Fade(duration=0.2);Alpha(opacity=90))";
padding=5;
pagecolor="#BFCFDF";
separatorsize=1;
//subimage="white_7x7.gif";
//subimagepadding=8;
}

with(milonic=new menuname("The Homes")){
style=submenuStyle;
margin=3;

aI("text=Introduction & Gallery;url=thehomes_intro.asp;");
aI("text=Construction;url=thehomes_construction.asp;");
aI("text=Landscape;url=thehomes_landscape.asp;");
aI("text=Energy Efficiency;url=thehomes_energy.asp;");
aI("text=Featured Plan;url=thehomes_plans.asp;");
aI("text=Standard Features;url=thehomes_features.asp;");

}

with(milonic=new menuname("Community")){
style=submenuStyle;
margin=3;
aI("text=Port 32 Lifestyle;url=community_lifestyle.asp;");
aI("text=Shore Spa;url=community_shorespa.asp;");
aI("text=The People;url=community_people.asp;");
//aI("text=Interactive Site Plan;url=community_plans.asp;");
aI("text=Interactive Site Plan;url=http://www.port32.com/2006/OverviewMap.htm;target=windowname;targetfeatures=width=800,height=533");
}

with(milonic=new menuname("Village")){
style=submenuStyle;
margin=3;
aI("text=About Bobcaygeon;url=village_Bobcaygeon.asp;");
aI("text=Activities;url=village_activities.asp;status=Plans");
}

with(milonic=new menuname("Builder")){
style=submenuStyle;
margin=3;
aI("text=Marshall Homes;url=builder_marshall.asp;");

}
drawMenus();

Add this line to your stylesheet. That class has already been called on the page in the two table cells that now contain menus.

Code:

.menucell{background-image: url(menubg.jpg) }

Below are two images you need which I had to make to get this to work. The menubg.jpg image that is the background for the table cells where the menus are. The other is a new image which is only the bottom of that homes circle so it will fit in that center table cell.

menubg.jpg

middle table cell image called content_nav_bgcenter.jpg

I put in borders and bordercolor in 3 of the tables so you could see what I did.

Please let me know when you get the images so I can remove them from my site. I hope this helps. It should have the menu be the same and in the same place on all browsers.

Ruth

Thanks Ruth - just one problem

Poster: glenp
Dated: Thursday July 13 2006 - 16:07:20 BST

Ruth, thank you for showing me this alternative way of doing this. Sorry for the delayed response, I didn't see your post until today. I tried your code and posted it at http://www.port32.com/index-2.htm but the menu doesn't load - not sure why, though I believe it has something to do with menuStyle.

Also..you can delete the images - I have them now.

(and I clicked "notify me when a reply is posted" this time

- GP

Poster: Ruth
Dated: Thursday July 13 2006 - 17:30:09 BST

Hi,

It looks like you changed the calls for files in the header and when you did you cut out the closing script tag.

Replace that closing tag and the menu should show.

Also, just for your information, when I did this page, I put the table menus coding on the page so you could see all of it and how I did it, but if you wanted you could save each as it's own file and just call the files in the respective table cell. So, you could save the left cell as embedded_main_left.js and the right as embedded_main_right.js then in place of putting the menus in script tags in the cells, you'd just put the call for the correct main menu file into it.

Code:

<SCRIPT language=JavaScript src="menu/embedded_main_left.js" type=text/javascript></SCRIPT>

in the left table cell and then one for the embedded_main_right.js in the right cell.

Hope that made sense to you

Ruth

Industrial Strength JavaScript and DHTML Menus

Feedback on menu

Thanks Ruth - just one problem