Table based menu when moving to 5.738

[kazarena]

Hi All,

While waiting for Finance department to purchase the menu, we were designing a menu using version 5.735 (Unfortunately it's an intranet site, therefore I can't provide a link).
That's what we had:

Code: Select all

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
  <td>
    <img src="/common/images/short.jpg" width="135" height="36">
  </td>
  <td>
  ... menu javascript...
  </td>
  <td width="100%" valign="top" background="/common/images/tail.jpg" style="background-repeat: no-repeat;" bgcolor="'#779DDE">
  </td>
</tr>
</table>

All 3 table cells share a matching background image. The idea is to have an empty cell (the last one) with static background image ang gradient fading which would fill the space in the row up to 100% browser width (if any empty space available) as customers may have up to 4 monitors bundled together. The menu is dynamic and rendered via XSLT from database, therefore we don't know the final width of the menu itself.

And the menu javascript is:

Code: Select all

fixMozillaZIndex=true;
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;

// styles
with(menuTabStyle=new mm_style()){
  bordercolor="#296488";
  borderstyle="solid";
  borderwidth=1;
  fontfamily="Verdana, Tahoma, Arial";
  fontsize="10";
  fontstyle="normal";
  fontweight="bold";
  headerbgcolor="#ffffff";
  headercolor="#000000";
  itemheight=34;
  offbgcolor="transparent";
  offcolor="#262626";
  onbgcolor="#4F8EB6";
  oncolor="#ffffff";
  outfilter="randomdissolve(duration=0.3)";
  overfilter="Fade(duration=0.2);Alpha(opacity=90);";
  padding=5;
  menubgimage="/common/images/bg.jpg";
  pagebgcolor="#ffeec2";
  pageborder="1px dashed #ffffff";
  separatorcolor="#2D729D";
  separatorsize=1;
  subimage="/common/js/arrow.gif";
  subimagepadding=2;
}

// ... and the menu itself
with(milonic=new menuname("Main Menu")){
  alwaysvisible=1;
  left=10;
  orientation="horizontal";
  position="relative";
  style=menuTabStyle;
  top=10;
  aI("showmenu=Menu_817;text=iPortal Home;url=http://{link};itemwidth=60;align=center;")
  aI("showmenu=Menu_819;text=Performance Reports;url=http://{link};itemwidth=100;align=center;")
  aI("showmenu=Menu_844;text=Company Research;url=http://{link};itemwidth=85;align=center;")
  aI("showmenu=Menu_846;text=Risk;url=http://{link};itemwidth=60;align=center;")
  aI("showmenu=Menu_866;text=Asset Allocation;url=http://{link};itemwidth=75;align=center;")
  aI("showmenu=Menu_874;text=Stock Screening;url=http://{link};itemwidth=85;align=center;")
  aI("showmenu=Menu_899;text=Fund & Market Commentary;url=http://{link};itemwidth=180;align=center;")
  aI("showmenu=Menu_902;text=About Staff;url=http://{link};itemwidth=60;align=center;")
  aI("showmenu=Menu_905;text=Team Sites;url=http://{link};itemwidth=60;align=center;")
}
// ... etc

It all worked perfectly fine for us. Then we had issues with opening urls in a new window and updated the menu to version 5.738, which also had some changes in the way menu item width is handled. Now, because of "width=100%" in the last cell of the table, the menu is squashed, ignoring itemwidth values (because I suppose the new version is using table cell based setup of the width).

If I remove "width=100%" from the last TD definition, menu starts working as expected, with itemwidth properly rendered. I looked through the forum for solution to preserve the current page markup and could find one. This means if there isn't any, we would have to re-design the whole graphic solution, which is not desirable, so any help would be greatly appreciated.

Is there any way to disable scaling of the menu, relative to the table it's been enclosed in? In other words, to have the same functionality as in previous versions of the menu.

Another possible solution (minimizing changes to HTML markup) would be to find a way to get the 'real' width of the menu via JavaScript when rendered and then reset the width of the cell which contains the menu. Is there any way to retrieve this 'real' width of the menu? I suppose I can get this value by adding all the item widths together (if setup) via menu property JS interface, but i'd prefer an easier way, if any exist.

Thank you in advance for any hints.

Regards,
Stan

[vikenk]

Hi,

I'm not 100% sure this will work as you want it, but I know that you can style the menu completely with CSS if desired. You could probably remove all the menu commands (related to styling) and go with:

onclass="(name of style)";
offclass="(name of style)";

In your style sheet, you could create a style and define all the menu properties you want with that style, including table width, item width and so on. Yes, the menu is table based and will accept your <td> and <table> tag styling. In a site that I run, I've chosen to style the menu partially with css. Again, I've never styled the menu *completely* with css, but this is just an example of how you could pull it off:

My menu data file looks like this:
......
with(menuStyle=new mm_style()){
offclass="menu";
onclass="menu";
fontfamily=" Arial, Tahoma, Verdana";
fontsize="0.90em";
fontweight="bold";
fontstyle="italic";
......

Any in my CSS, I have this:

/****** BELOW STYLES THE MILONIC MENU *****/
.menu table {
width: 90%;
text-align: center;
}

.menu table td {
padding: 3px 5px;
vertical-align: top;
}

.menu table td a {
text-decoration: none;
}

.submenu table td {
padding: 3px 5px;
}

.submenu table td a {
text-decoration: none;
}
/****** END MENU STYLING *****/

In my case, I'm setting the width of the menu and styling the hyperlinks, but in theory you could use CSS commands to completely style the menu to have it look the way you want. There are some menu commands that you may *need* to use - separatorsize, etc, but I'm sure you'll be able to figure out what's specific to the menu and what's CSS based.

I've never actually tried it, though. Maybe I will one day, just for fun.

Anyway, I hope this helps a little bit. Good luck!

Viken K.

[Ruth]

Hi,

I think what you see is that the items with multiple words now wrap when you have that 100% in that table cell. If you put in non-breaking line spaces in those items between the words they will no longer wrap and the menu will spread out again and allow you to leave that 100% width in.

I'm not sure, but you also might be able to put in css styling, make a class that says no wrap, sorry I don't do much css so I'm not sure what that code is, but make a class set to no wrap and then call it in each item, i.e.

.classname{whatevr the css is} then in each item with multiple words, you'd put

Code: Select all

aI("showmenu=Menu_817;text=iPortal Home;url=http://{link};itemwidth=60;align=center;onclass=mnowrap;offclass=mnwrap;") 

Or you can put it in the actual menu styles which would apply it to all menus and all items keeping them from wrapping. I dont' know what you call your menuSTYle but in the download you'd add it like this.

Code: Select all

with(menuStyle=new mm_style()){
offclass="classname";
onclass="classname";
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;

The reason for both an on and off class is that you have two states in the menu mouseOff and mouseOn state.

Hope this helps.

Ruth

[kazarena]

Ruth, vikenk,
Thank you for replies.

Putting non-breaking spaces resolves the problem of wrapping (actually, in the menu shown above some width constraints were put to enable wrapping. The problem is that they don't affect the width in the condictions shown above).

However, it still doesn't allow me to use itemwidth attribute to set up the width manually. E.g. if I wanted to make one menu item a little bit wider to improve the way it looks or make more noticeable. The issue for me lies in the fact that my menu in the new version is affected by the tags outside, instead of preserving the internal constraints. I was just wondering if this is an expected behaviour for table based menus or it's some sort of overlooked feature of the new version, which shows itself only when menu being put into a table with scaling factor 100% for one of the cells?

If this is an expected behaviour, I'd probably better change the general design of the menu, as putting individual styling on DB-based menus would be problematic for us.

Thanks again for your answers.

Regards,
Stan

[Ruth]

If you want the items to wrap which I didn't know, don't put in that non-breaking line space. To over-ride the table TD setting of 100% in that 3rd table cell of that row, you would use the menu property of minwidth to set a minimum width of the menu. In this case the actual width of the menu items is 765 which is the total of all the itemwidths you have.

Code: Select all

with(milonic=new menuname("Main Menu")){ 
alwaysvisible=1; orientation="horizontal"; 
position="relative"; 
style=menuTabStyle; minwidth=765;

The items will then be the width you set, plus of course any padding, subimage padding and other spacing you might put in.

Ruth

[kazarena]

To over-ride the table TD setting of 100% in that 3rd table cell of that row, you would use the menu property of minwidth to set a minimum width of the menu. In this case the actual width of the menu items is 765 which is the total of all the itemwidths you have.

Code: Select all

with(milonic=new menuname("Main Menu")){ 
alwaysvisible=1; orientation="horizontal"; 
position="relative"; 
style=menuTabStyle; minwidth=765;

The items will then be the width you set, plus of course any padding, subimage padding and other spacing you might put in.

Ruth

Ruth, I've tried using minwidth as you suggested. No success, unfortunately - it seems to be ignored regardless what value I put for minwidth.

Regards,
Stan

[Ruth]

We will need to see your full html code on the page, any css style codes you have and the full menu data. I used what you posted and it worked fine.

I actually tested this in IE, NN, FF using what you posted, putting the menu in the table per the table based menu instructions, and it works so there is something else invovled with regard to your code.

Ruth

[kazarena]

Ruth,

Here's the HTML code. I've made it as short as possible preserving the issue we were talking about:

Code: Select all

<html>
<body leftmargin="0" topmargin="0">
	<SCRIPT language="JavaScript" src="/common/js/milonic_src.js" type="text/javascript"></SCRIPT>
	<script language="JavaScript" src="/common/js/mmenudom.js"></script>
	 <table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr><td valign=top bgcolor="blue"><img src="/common/images/short.jpg" width="135" height="36"></td><td>
<script type="text/javascript" language="JavaScript">
		_PORTAL_MENU_HEIGHT = 37;
		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(menuTabStyle=new mm_style()){
			bordercolor="#296488";
			borderstyle="solid";
			borderwidth=1;
			fontfamily="Verdana, Tahoma, Arial";
			fontsize="10";
			fontstyle="normal";
			fontweight="bold";
			headerbgcolor="#ffffff";
			headercolor="#000000";
			itemheight=34;
			offbgcolor="transparent";
			offcolor="#262626";
			onbgcolor="#4F8EB6";
			oncolor="#ffffff";
			outfilter="randomdissolve(duration=0.3)";
			overfilter="Fade(duration=0.2);Alpha(opacity=90);";
			padding=5;
			menubgimage="/common/images/bg.jpg";
			pagebgcolor="#ffeec2";
			pageborder="1px dashed #ffffff";
			separatorcolor="#2D729D";
			separatorsize=1;
			subimage="/common/js/arrow.gif";
			subimagepadding=2;
		}
		</script>
	<script type="text/javascript" language="JavaScript" >
	with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
left=10;
orientation="horizontal";
position="relative";
style=menuTabStyle;
minwidth=765; 
top=10;
	aI("text=iPortal Home;url=http://milonic.com;itemwidth=60;align=center;")
	aI("text=Performance Reports;url=http://milonic.com;itemwidth=100;align=center;")
	aI("text=Company Research;url=http://milonic.com;itemwidth=85;align=center;")
	aI("text=Risk;url=http://milonic.com;itemwidth=60;align=center;")
	aI("text=Asset Allocation;url=http://milonic.com;itemwidth=75;align=center;")
	aI("text=Stock Screening;url=http://milonic.com;itemwidth=85;align=center;")
	aI("text=Fund & Market Commentary;url=http://milonic.com;itemwidth=120;align=center;")
	aI("text=About Staff;url=http://milonic.com;itemwidth=60;align=center;")
	aI("text=Team Sites;url=http://milonic.com;itemwidth=60;align=center;")
	}
	drawMenus();
	</script>
	</td><td id="tail" valign="top" width="100%" background="x/common/images/end.jpg" style="background-repeat: no-repeat; background-color: blue"></td>
	</tr>
	</table>
</body>
</html>

Images aren't needed to see the table layout. I've made the 1st and 3rd table cells blue instead, to make it visible. It you remove 'width="100%"' from the last TD tag, the menu would look like how it's meant to be, with the table heigth=36 and the menu width as set up in the menu definition.

Thank you for your help.

Regards,
Stan

[Ruth]

Hi Stan,

OK, don't ask me why, because I don't know the answer

Mine worked because I had used the downloaded file and just substituted your text, itemwidth,align and left the original showmenus. So, the itemwidths worked because the showmenus, like samples and such I guess made it spread out. No idea why. But I did get it to work without the showmenus.
____________

I looked at the minwidth and thought, OK, in this menu there is actually a menuwidth, since the itemwidths are specified and I added menuwidth=765; Still no luck. Just for the heck of it, since it shouldn't matter, but it turns out that in this particular case it does, I tried adding px to the numbers and that did it.

Code: Select all

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
left=10;
orientation="horizontal";
style=menuTabStyle;
top=10;
position="relative";
menuwidth="765px";

In my tests I found that you can either add it to the menuwidth or you can add it to the itemwidth, though that is the more involved, and leave it out of menuwidth, but it needs to have px noted. Also, you can leave out minwidth= but you must have menuwidth=

I tested this in IE, FF, NN, Opera, but you might want to do your own testing, because, admittedly, I'm not up to the newest versions, that actually requires taking the time to download, install, do my custom setups....

Ruth

[kazarena]

Ruth,

This has actually worked:

Code: Select all

menuwidth="765px";

, with and without 'px'.

I can swear I tried menuwidth before, without a luck, but I guess I had changed something else after, which made it work now.

By the way, we are using IE 6.0, which isn't new either.

Great news!

Thank you very much, I really appreciate your help.

Regards,
Stan