Help - FollowScroll with Vertical Menu inside a Table Cell

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

Help - FollowScroll with Vertical Menu inside a Table Cell

Poster: tilak
Dated: Wednesday April 26 2006 - 2:13:54 BST

Hello Milonic Gurus,
I successfully put a Milonic DHTML vertical menu into a <td> element of a table. That works just fine.
What I want is this:
I want the menu to follow scroll i.e. it not to disapper from the web page even when I scroll down.

I am trying to put the line
followscroll="0,100,10"; inside the code. It looks like this now:

<table cellspacing="2" cellpadding="2" height="75%" width="100%" bgcolor="#ffffff" border="1">
<tr valign="top">
<td id="leftpanel" width="10%">
<script type="text/javascript">
with(new menuname("Main Menu")){
alwaysvisible=1;
style=menuStyle;
position="relative";
followscroll="0,100,10";
aI("status=Home;text=Home;url=http://tilaks.homelinux.com/;");
aI("showmenu=Movies;text=Movies;");
aI("showmenu=Music;text=Music;");
aI("showmenu=Travel n Tourism;text=Travel n Tourism;");
aI("showmenu=Sports;text=Sports;");
aI("showmenu=Education;text=Education;");
}
drawMenus() ;
</script>
</td>
</tr>
</table>

But it does not give the desired behaviour. It just stays static and does not follow the scroll.

Can anyone help me ?

Thanks a lot, in advance.

Poster: Ruth
Dated: Wednesday April 26 2006 - 3:54:13 BST

Hi,

The whole purpose of putting the menu into a table cell is to keep in at that position so that when page resolution is changed based on the user's browser settings the menu will always be in the same place. By making it relative position you disable the followscroll property since you've told it to remain where it is relative to the table cell.

If you want follow scroll you'll need to place the menu using absolute positioning, i.e. top=20; left=10; where 20 and 10 are whatever you want them to be. Then set the follow scroll and it will work.

Ruth

Poster: tilak
Dated: Wednesday April 26 2006 - 4:26:17 BST

Ruth,
I understand what you are saying.
Usually, people tend to put a navigation bar inside a table cell rather than going for absolute position, so that it can be more controlled.
If the followcroll can be enabled for this also (I understand this may be an enhancement) then I think it is going to add a lot of value.

Any other workarounds ?

Poster: John
Dated: Wednesday April 26 2006 - 15:29:51 BST

While I realize I'm breaking the rules here, this works for me...

Code:

with(new menuname("mainMenu")){
top=220;
left=5;
style = tstyle1;
alwaysvisible = 1;
itemwidth = 155;
followscroll = "5,10,4";
margin = AllMargin;
position = "absolute";
aI("text=Introduction;showmenu=careerplan;url=intro.htm;status=Introduction;");
aI("text=Discovering More About Yourself;showmenu=discover;url=discover.htm;status=Discovering More About Yourself;");
aI("text=Investigating the \"World of Work\";showmenu=investigate;url=investigate.htm;status=Investigating the World of Work;");
aI("text=Making an Informed Decision and Goal Setting;showmenu=goal;url=goal.htm;status=Making an Informed Decision and Goal Setting;");
aI("text=Implementation of Your Job Search;showmenu=search;url=search.htm;status=Implementation of Your Job Search;");
aI("text=Return to Career Services;url=http://www.west.asu.edu/cspc/;status=Career Services Home;");
}

You can see it, and the rest of the code, at http://www.west.asu.edu/cspc/steps/discover.htm.

Questions

Poster: tilak
Dated: Wednesday April 26 2006 - 17:49:35 BST

Hi,
I do see it working on your site !!! Pretty promising to me.

I have a few questions.

1. The way I have it now, is I have it inside a table cell <td>..</td> with the position property set to relative. That puts it inside the table cell all the time.
What I see in your case, is that you are trying a combination of two things. Firstly, you are not using the menu to be placed inside a table cell to start with . Am I correct or wrong ? Please clarify.

2. I feel that you have it set to absolute and not inside a table cell and then you have played around with the top coordinates of the menu to be placed in such a way that it looks to be in the right column in your page. Once you do that, you use followscroll and thus it works.
Please clarify my understanding .

I would love to hear from you that you indeed placed the menu inside a <td> and still get the effect that I am after, and the one you have achieved.

I am curiously and eagerly awaiting a reply.

Thanks a lot, in advance !!!

To John

Poster: tilak
Dated: Wednesday April 26 2006 - 18:04:51 BST

John,
In addition to my email reply to your post, I would also like to know what is meant by style = tstyle1 ? I thought we can use only menustyle unless either you have changed the names or created a new style .

I just cut and pasted your code, but it did not work. The menu itself vanished. There must be some more tricks to get this working inside a <td> in my page.

Thanks a lot.

Poster: John
Dated: Thursday April 27 2006 - 15:01:33 BST

That's a straight htm page, so by looking at the source you'd be able to see exactly where all the files are.

In this case, the full _data file is at http://www.west.asu.edu/cspc/steps/steps_new_data.js.

While I don't advocate breaking Andy's rules, this was done long ago with a very early version of the system, BAR (Before Andy's Rules), but continues to work.

Poster: Ruth
Dated: Thursday April 27 2006 - 17:56:47 BST

Hi,

Just to add my two cents, John is using a treemenu so maybe that is why yours disappeared, if you didn't have the treemenu.js module? That t-style comes from the treemenu, but I haven't taken a real look at the page so I could be off the chart here.

Also, just to point out, you can name the styles anything you want, you don't have to use menuStyle: mainStyle, myStyle, style1, subStyle, mySub and so on whatever suits your fancy

Ruth

To John and Ruth

Poster: tilak
Dated: Thursday April 27 2006 - 19:36:56 BST

Hello John, Ruth,
When I downloaded my menu, I did not get a treemenu.js. . I just got the 4 js files menu_data.js, milonic.js, mmenuns4.js and mmenudom.js.
Is there something wrong I am doing ?
Do I need a treemenu to get the effect that John has in his page ?
All I need is to be able to put the menu inside a <td>...</td> and have it foward scroll.
I am a lil confused whether to use absolute or relative.
If you (John or Ruth) can please throw some light on how the effect was achieved in http://www.west.asu.edu/cspc/steps/discover.htm, I would really greatly appreciate it.
Johns site has this line of code
tr>
<td width="155" rowspan="3" align="center" valign="top"><a name="nav"></a><script language="javascript" src="steps_new_data.js" type="text/javascript"></script><script language="javascript" src="/sa/menu5/treemenu.js" type="text/javascript"></script></td>
</tr>

He does not have anything like what we have been told to do, i.e. to put the main menu script inside the <td>..</td> tag with 'relative' positioning while leave the submenu data inside the menu_data.js.

What do I need to do to get this effect ?

Thanks a lot in advance (to both John and Ruth)

To Ruth

Poster: tilak
Dated: Thursday April 27 2006 - 19:51:05 BST

In addition to what I wrote just now in my previous post, I would like to have the sub-menus, just like they are in my "under construction" site http://worldinpocket.home.comcast.net

The same kind of menu, is what I want inside my table cell (which is how you see it on the site) but I want it to scroll with the browser windown scrolling down.

Hope this helps, explain what I am looking for.

Thanks

Poster: Migru
Dated: Thursday April 27 2006 - 19:51:29 BST

Hi

the treemenu is not a standard part of the menu. Its part of the bolt-on modules and you find it here:

http://www.milonic.com/menumodules.php

(scroll down there)

Michael

Poster: Ruth
Dated: Thursday April 27 2006 - 23:29:05 BST

Hi,

If you place the main menu in a table cell with the position="relative"; to keep it there it will not scroll. I doubt that the menu could be programmed to do that, position="relative" is a css code and the browsers treat it as being 'stationary' within that table cell.

However, you could put a div inside that table cell, set it to a 150px or so width and then set the menu as absolutely positioned and followscroll. Try this as your middle table setup

Code:

<DIV>
<TABLE height="75%" cellSpacing=2 cellPadding=2 width="100%" bgColor=#000000 
border=1>
  <TBODY>
  <TR vAlign=top>
    <TD id=leftpanel ><div style="height:75%;width:150px;border:1px solid red">&nbsp;</div>  [edited:br removed]</TD>
    <TD id=maincanvas width="75%" height="100%">
      <TABLE id=maincanvastable height="100%" width="100%" border=1>
        <TBODY>
        <TR id=top height="50%" width="100%">
          <TD colSpan=2><FONT color=#ffffff>Under Construction<BR>An Utopia 
            for anyone looking to explore Indian culture, food, cinema, her 
            pristine natural beauty, among other things !!! </FONT></TD></TR>
        <TR id=mid height="40%">
          <TD id=mid_ad width="30%">Ad goes here </TD>
          <TD id=mid_content width="70%">Middle content goes here. </TD></TR>
        <TR id=bottom height="10%">
          <TD colSpan=2>Bottom content goes here </TD></TR></TBODY></TABLE></TD>
    <TD id=rightpanel width="15%" height="100%">&nbsp; Possible place for 
      advert </TD></TR></TBODY></TABLE></DIV></FONT><BR>

And put this as your main menu back in the menu_data.js file

Code:

with(new menuname("Main Menu")){
alwaysvisible=1;
style=menuStyle;
top="220";
left="20";
followscroll = "5,10,4";
aI("status=Home;text=Home;url=http://home.comcast.net/~worldinpocket/index.html;");
aI("showmenu=Movies;text=Movies;");
aI("showmenu=Music;text=Music;");
aI("showmenu=Travel n Tourism;text=Travel n Tourism;");
aI("showmenu=Sports;text=Sports;");
aI("showmenu=Education;text=Education;");
   }

Ruth

To Ruth

Poster: tilak
Dated: Friday April 28 2006 - 0:23:01 BST

Ruth,
Your code snippet certainly works.
I wanted to know what those multiple <br>'s and a couple of $nbsp;'s after the opening <div> was for ?
Was it to make the entire page scroll just to see the effect , which I doubt it is , coz I have the same down in another place in the page ?
Or is it to have the <div> to span the entire length of the <td> column ?
Or is it something else ?

How did you get the red border to span the entire <td> column height and width ?

Thanks for your insights.

Tilak

Poster: Ruth
Dated: Friday April 28 2006 - 2:23:09 BST

Hi,

:lol:

Sorry. I was playing with a number of things. The first one was without the div and in my browser without the breaks I didn't have anything to scroll so I couldn't test the scrolling. When I put that div in I just forgot to remove all the breaks.

The div spans 150px since the menu is around 130px wide or so. That way it leaves some space for those who increase the font size and thereby increase the menu width.

When you use divs, if you set the height and width of the div using css it will be that size even if you don't have anything in it other than a non breaking line space and therefore the border goes around it totally. I just left the border in so you could see the div size.

Ruth

Hi Ruth

Poster: tilak
Dated: Friday April 28 2006 - 5:29:03 BST

Ruth,
Thanks a lot for your reply.
I think I am all set.
Just to make full use of Milonic DHTML on my page, I wanted to know from you how to use tabs in my page.
For example, if you look at my page http://worldinpocket.home.comcast.net you will see a lil portion between the first table and the middle table.
I want to put a tab in that area. I want to put a tiny table with one row there. Essentially, I want one tab for each country, e.g. US, India, UK, Australia and once you click one of them, the context of the page will shift to be country specific, although the vertical DHTML menu elements will remain pretty much the same.
Can you please help me out here.
As like the previous emails of yours, I am very much appreciative of your help.

Thanks a lot, in advance.

Poster: Ruth
Dated: Friday April 28 2006 - 13:28:30 BST

Hi,

I'm not sure what you mean by tab, there is a specific menu that is made of tabs, actually there are a couple of designs. But, if you mean you want 'links' then try this.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>The WYNIWYG - What You Need Is What You Get !!!</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css>BODY {
   FONT-SIZE: 12px; FONT-FAMILY: verdana; BACKGROUND-COLOR: #ffffff;margin:5px;
}
.backG {
   FONT-SIZE: 12px; COLOR: #ffffff; BORDER-BOTTOM: #538c4d 2px solid; FONT-FAMILY: verdana; BACKGROUND-COLOR: #93c39b
}
TD.form1 {
   FONT-SIZE: 12px; BACKGROUND: #eaeaea; FONT-FAMILY: verdana
}
</STYLE>

<META content="MSHTML 5.50.4807.2300" name=GENERATOR></HEAD>
<BODY><!-- ***** This is the section of code you need to paste into your web pages ***** -->
<SCRIPT src="milonic_src.js" type=text/javascript></SCRIPT>
<NOSCRIPT><A href="http://www.milonic.com/">JavaScript Menus and DHTML Menus 
Powered by Milonic</A></NOSCRIPT>
<SCRIPT type=text/javascript>
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");      
  else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>"); 
</SCRIPT>

<SCRIPT src="menu_data.js" type=text/javascript></SCRIPT>
 <!-- **** JavaScript Menu HTML Code --><!-- This is the table for the header that contains the company logo and the letter-head google ad -->
<TABLE height="20%" cellSpacing=2 cellPadding=2 width="100%" bgColor=#000000 border=1>
  <TBODY>
  <TR vAlign=top>
    <TD align=middle><FONT color=#ffffff>Company Logo Image</FONT> </TD></TR>
  <TR vAlign=top>
    <TD>&nbsp; </TD></TR></TBODY></TABLE>
   <table width="100%" cellpadding=0 cellspacing=4 border=0 align="center">
<tr>
    <td><table cellpadding=0 cellspacing=0 border=0 align="center" width="80%">
<tr>
    <td>
   <script>
   with(new menuname("Country")){
alwaysvisible=1;
style=tableStyle;
orientation="horizontal";
menuwidth="100%";
itemwidth="100%";
menualign="center";
position="relative";
aI("text=Country 1;url=whatever;");
aI("text=Country 2;");
aI("text=Country 3;");
aI("text=Country 4;");
aI("text=Country 5;");
aI("text=Country 6;");
   }
   drawMenus();
   </script>
   </td>
</tr>
</table>
   </td>
</tr>
</table>
<DIV>
<TABLE height="75%" cellSpacing=2 cellPadding=2 width="100%" bgColor=#000000 
border=1>
  <TBODY>
  <TR vAlign=top>
    <TD id=leftpanel><div style="height:75%;width:150px;border:1px solid red">&nbsp;</div>
       </TD>
    <TD id=maincanvas width="75%" height="100%">
      <TABLE id=maincanvastable height="100%" width="100%" border=1>
        <TBODY>
        <TR id=top height="50%" width="100%">
          <TD colSpan=2><FONT color=#ffffff>Under Construction<BR>A Utopia 
            for anyone looking to explore Indian culture, food, cinema, her 
            pristine natural beauty, among other things !!! </FONT></TD></TR>
        <TR id=mid height="40%">
          <TD id=mid_ad width="30%">Ad goes here </TD>
          <TD id=mid_content width="70%">Middle content goes here. </TD></TR>
        <TR id=bottom height="10%">
          <TD colSpan=2>Bottom content goes here </TD></TR></TBODY></TABLE></TD>
    <TD id=rightpanel width="15%" height="100%">&nbsp; Possible place for 
      advert </TD></TR></TBODY></TABLE></DIV></FONT><BR>
<DIV>
<TABLE height="5%" cellSpacing=2 cellPadding=2 width="100%" bgColor=#000000 
border=1>
  <TBODY>
  <TR vAlign=top>
    <TD align=left width="20%">&nbsp; <FONT face=Arial color=#000000 
      size=-2><A href="http://www.milonic.com/">Drop Down Menu by 
      Milonic</A></FONT> </TD>
    <TD align=right width="90%"><FONT face=Arial color=#ffffff>Contact Us | 
      About Us </FONT></TD></TR></TBODY></TABLE></DIV></FONT>
<DIV></DIV></FONT>
<DIV></DIV></BODY></HTML>

And add this style to the menu data file. Just copy and paste it right below the menuStyle that is already there.

Code:

with(tableStyle=new mm_style()){
bordercolor="#CCCCCC";
borderstyle="outset";
borderwidth=3;
onborder="3px inset #cccccc";
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#000000";
offcolor="#ffffff";
onbgcolor="#ffffff";
oncolor="#000000";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=5;
pagebgcolor="#82B6D7";
pagecolor="red";
separatorcolor="#cccccc";
separatorsize=1;
separatorheight="100%";
separatorwidth=2;
separatoralign="center";
separatorpadding=3;
subimage="arrow.gif";
subimagepadding=2;
}

Of course you don't have to use a different style for the menu in the table, but I figured I'd play around and show you some other style things you can do.

Below my name are some links. You should take a look at the 1st one for the Beginners' Forum. There are some explanations and examples, particularly sections I, II, and III and borders.

Ruth

To Ruth

Poster: tilak
Dated: Friday April 28 2006 - 14:10:15 BST

Ruth,
Your example that you provided is in very similar lines with what I am looking for.
What I meant by tabs, can be best illustrated by a sample website URL : http://news.yahoo.com/s/ap/20060428/ap_ ... an_nuclear .
If you see on top, the tabs called "Home", "US" , "Business", "World" etc. That is what I am looking for. Also, these tabs may well go beyond one single row into two rows in which case they will show up within the same width but in multiple rows. This is what I want to achieve.

Secondly, with the tabs that you showed me in the example, I am assuming that I can add the vertical menu in the same page as the horizontal tabs. Is that a fair statement ?

Have been very much helped by your examples, advice, suggestions and code snippets. Thank you so much.

Awaiting eagerly, another innovative code snippet that does what I am looking for.

Thanks
Tilak

Poster: Migru
Dated: Friday April 28 2006 - 15:10:50 BST

Hi

please accept my comment, in terms of this menu, these are not "tabs" these are menu items of an additional menu, with an addional styling. So where is the problem? The term "tabs" is confusing. You can place multiple menus on one page, each of them having its own position and/or own style.

Michael

To Ruth

Poster: tilak
Dated: Friday April 28 2006 - 19:31:05 BST

Hi Ruth,
I am waiting for your reply :-)

Thanks
Tilak

Poster: Migru
Dated: Friday April 28 2006 - 21:14:44 BST

Hi

you are using an unlicensed version of the menu.

Michael

Poster: Ruth
Dated: Friday April 28 2006 - 21:23:30 BST

Hi,

Michael is correct. I only used another menu, made it always visible and placed it in the table. You can get that tab look by either using images or by using css in the menu and in the table the menu is in.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>The WYNIWYG - What You Need Is What You Get !!!</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css>BODY {
   FONT-SIZE: 12px; FONT-FAMILY: verdana; BACKGROUND-COLOR: #ffffff;margin:5px;
}
.backG {
   FONT-SIZE: 12px; COLOR: #ffffff; BORDER-BOTTOM: #538c4d 2px solid; FONT-FAMILY: verdana; BACKGROUND-COLOR: #93c39b
}
TD.form1 {
   FONT-SIZE: 12px; BACKGROUND: #eaeaea; FONT-FAMILY: verdana
}

.bord{border-top:1px solid #000000;border-right:1px solid #000000;
border-bottom:0px;border-left:1px solid #000000; 
}
.menutable{border-top:0px solid #000000;border-right:0px solid #000000;border-bottom:1px solid #000000;border-left:0px solid #000000;
margin-top:0px;margin-right:0px;margin-bottom:5px;margin-left:0px;
</STYLE>
<!--*********SEE TWO NOTES BELOW ABOUT CLASS USED FOR MENU AND FOR TABLE MENU IS IN!**********-->
<!--NOTE: *************************.bord is the class used for putting the border around the top, 
right and left of the menu items and preventing a bottom border around each item*********-->

<!--NOTE: ********* .menutable is the class applied in the table to put a full black bottom border
that looks as if it is at the bottom of the menu. It actually is a border at the bottom of the table.
This class is applied in the table cell, the td, where the menu is put.****************-->
<!--*********************************************************************************************-->
<META content="MSHTML 5.50.4807.2300" name=GENERATOR></HEAD>
<BODY><!-- ***** This is the section of code you need to paste into your web pages ***** -->
<SCRIPT src="milonic_src.js" type=text/javascript></SCRIPT>
<NOSCRIPT><A href="http://www.milonic.com/">JavaScript Menus and DHTML Menus 
Powered by Milonic</A></NOSCRIPT>
<SCRIPT type=text/javascript>
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");      
  else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>"); 
</SCRIPT>

<SCRIPT src="menu_data_test.js" type=text/javascript></SCRIPT>
 <!-- **** JavaScript Menu HTML Code --><!-- This is the table for the header that contains the company logo and the letter-head google ad -->
<TABLE height="20%" cellSpacing=2 cellPadding=2 width="100%" bgColor=#000000 border=1>
  <TBODY>
  <TR vAlign=top>
    <TD align=middle><FONT color=#ffffff>Company Logo Image</FONT> </TD></TR>
  <TR vAlign=top>
    <TD>&nbsp; </TD></TR></TBODY></TABLE><br>
   <table width="100%" cellpadding=0 cellspacing=1 border=0 align="center">
<tr>
    <td class="menutable">
   <script>
   with(new menuname("Country")){
alwaysvisible=1;
style=tableStyle;
orientation="horizontal";
menuwidth="100%";
itemwidth="100%";
menualign="center";
position="relative";
aI("text=USA;url=whatever;");
aI("text=Great&nbsp;Britian;url=whatever;");
aI("text=New&nbsp;Zealand;url=whatever;");
aI("text=Australia;url=whatever;");
aI("text=Russia;url=whatever;");
aI("text=Brazil;url=whatever;");
aI("text=Germany;url=whatever;");
aI("text=Italy;url=whatever;");
aI("text=Spain;url=whatever;");
aI("text=Country;url=whatever;");
   }
   drawMenus();
   </script>
   
   </td>
</tr>
</table>
<div style="height:2px;padding:0px;margin:0px"><img src="blank.gif" width="1" height="3" border="0"></div>
<DIV>
<TABLE height="75%" cellSpacing=2 cellPadding=2 width="100%" bgColor=#000000 
border=1>
  <TBODY>
  <TR vAlign=top>
    <TD id=leftpanel><div style="height:75%;width:150px;border:1px solid red">&nbsp;</div>
       </TD>
    <TD id=maincanvas width="75%" height="100%">
      <TABLE id=maincanvastable height="100%" width="100%" border=1>
        <TBODY>
        <TR id=top height="50%" width="100%">
          <TD colSpan=2><FONT color=#ffffff>Under Construction<BR>A Utopia 
            for anyone looking to explore Indian culture, food, cinema, her 
            pristine natural beauty, among other things !!! </FONT></TD></TR>
        <TR id=mid height="40%">
          <TD id=mid_ad width="30%">Ad goes here </TD>
          <TD id=mid_content width="70%">Middle content goes here. </TD></TR>
        <TR id=bottom height="10%">
          <TD colSpan=2>Bottom content goes here </TD></TR></TBODY></TABLE></TD>
    <TD id=rightpanel width="15%" height="100%">&nbsp; Possible place for 
      advert </TD></TR></TBODY></TABLE></DIV></FONT><BR>
<DIV>
<TABLE height="5%" cellSpacing=2 cellPadding=2 width="100%" bgColor=#000000 
border=1>
  <TBODY>
  <TR vAlign=top>
    <TD align=left width="20%">&nbsp; <FONT face=Arial color=#000000 
      size=-2><A href="http://www.milonic.com/">Drop Down Menu by 
      Milonic</A></FONT> </TD>
    <TD align=right width="90%"><FONT face=Arial color=#ffffff>Contact Us | 
      About Us </FONT></TD></TR></TBODY></TABLE></DIV></FONT>
<DIV></DIV></FONT>
<DIV></DIV></BODY></HTML>

menu_data file:

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="#296488";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#DCE9F0";
offcolor="#515151";
onbgcolor="#4F8EB6";
oncolor="#ffffff";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=5;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#2D729D";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
}
with(tableStyle=new mm_style()){
bordercolor="#CCCCCC";
borderstyle="outset";
borderwidth=0;
offclass="bord";
onclass="bord";
//offborder="1px solid #000000";
//onborder="1px solid #000000";
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#CCCCCC";
offcolor="#000000";
onbgcolor="#ffffff";
oncolor="#cccccc";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=5;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="transparent";
separatorsize=3;
separatorheight="100%";
separatorwidth=2;
separatoralign="center";
separatorpadding=0;
menubgcolor="transparent";
subimage="arrow.gif";
subimagepadding=2;
}
with(new menuname("Main Menu")){
alwaysvisible=1;
style=menuStyle;
top="220";
left="20";
followscroll = "5,10,4";
aI("status=Home;text=Home;url=http://home.comcast.net/~worldinpocket/index.html;");
aI("showmenu=Movies;text=Movies;");
aI("showmenu=Music;text=Music;");
aI("showmenu=Travel n Tourism;text=Travel n Tourism;");
aI("showmenu=Sports;text=Sports;");
aI("showmenu=Education;text=Education;");
   }

with(milonic=new menuname("Movies")){
overflow="scroll";
style=menuStyle;
aI("text=History Of Indian Cinema;url=http://worldinpocket.home.comcast.net/india/movies/movies-history.html;")
aI("text=Stars Of Today;url=http://worldinpocket.home.comcast.net/india/movies/movies-starstoday.html;")
aI("text=Stars oI Yester Years;url=http://worldinpocket.home.comcast.net/india/movies/movies-starsyester.html;")
aI("text=Movies In The Theater;url=http://worldinpocket.home.comcast.net/india/movies/movies-theater.html;")
aI("text=In The Wings;url=http://worldinpocket.home.comcast.net/india/movies/movies-inthewings.html;")

}

with(milonic=new menuname("Music")){
style=menuStyle;
aI("text=History Of Indian Music;url=http://worldinpocket.home.comcast.net/india/movies/music-history.html;")
aI("text=Stars Of Today;url=http://http://worldinpocket.home.comcast.net/india/music/movies-starstoday.html;");
aI("text=Stars Of Yester Years;url=http://worldinpocket.home.comcast.net/india/music/movies-starsyester.html;");
aI("text=Bengali Music;url=http://worldinpocket.home.comcast.net/india/music/music-bengali.html;");
aI("text=Hindi Music;url=http://worldinpocket.home.comcast.net/india/music/music-hindi.html;");
aI("text=Online Music;url=http://worldinpocket.home.comcast.net/india/music/movies-starstoday.html;");
}

with(milonic=new menuname("Travel n Tourism")){
style=menuStyle;
aI("status=Places Of Interest in India;text=Places of Interest;url=http://home.comcast.net/~worldinpocket/india/travel/travel-interest.html;");
aI("text=Map Of India;url=http://worldinpocket.home.comcast.net/india/travel/travel-map.html;");
aI("text=Travel Agencies;url=http://worldinpocket.home.comcast.net/india/travel/travel-agencies.html;");
aI("text=How To Get To;url=http://worldinpocket.home.comcast.net/india/travel/travel-howtogetto.html;");
aI("text=Hotels;url=http://worldinpocket.home.comcast.net/india/travel/travel-hotels.html;");
}

with(milonic=new menuname("Sports")){
style=menuStyle;
aI("status=Indian Cricket;text=Cricket&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;;url=http://worldinpocket.home.comcast.net/india/sports/sports-cricket.html;");
aI("status=Indian Football;text=Football;url=http://worldinpocket.home.comcast.net/india/sports/sports-football.html;");
aI("status=Indian Hockey;text=Hockey;url=http://worldinpocket.home.comcast.net/india/sports/sports-hockey.html;");
}

drawMenus();

That should give you an idea of what you can do using the menu to put in two visible menus and using css styling. There are also tabbed style menus samples which you can find on the main site under the DHTML Menu link and Menusamples item. There are 3 types.

You cannot get it to automatically wrap if it's wider than the rest of the tables it will just expand, however you can use divides but that will actually divide it in half, so if you have 11 items it will put 6 on the top row and 5 on the bottom and the menu will become smaller in width until you have enough items to have it expand the 100% again.

The other option is when you reach the limit of the width, to make a second table below the menu table, make it exactly the same and start a new menu.

You really need to take a look at the beginners' guide section, and particularly at the properties. There are 3 types, style properties which go in the menuStyle section, menu properties which go in the menu in the same area where you have style=; alwaysvisible= etc. and then item proeprties which go in each item.

Please look at the head of the page at the notes I place surrounded by the ****** which talk about the css. Also note in the menu data where I have used onclass= and offclass= that is applying the css I created for the borders of items to that table menu for the tab look.

I have to assume you are using the unlicensed version to develop the site. Since this is a commercial site [given you have a company logo listed] you will have to purchase a license. Milonic is very reasonably priced for the great menu you get.

Ruth