How make vertical menu 100% width of a table cell?

bongobongo · Post by **bongobongo** » Sun Apr 15, 2007 1:33 am

Hi.

I'm a newbie to this menu and are currently starting to evaluate this menu for use in a CMS application.

QUESTION 1:

I want the menu to use the width of the table cell, but not to go outside the table borders.
I would like to be able to tell menu/menuitems to use 100% of the table cell width, and not specify it in pixels (since that is specified in the stylesheet for the table).

How do I make this work crossbrowser?

The sample code at end of post are not accurate (may be my fault though), neither in FF nor in IE7, not tested any other browsers though....

In my Firefox 2.0.0.3 the right side of the menu go above the 1px border of the table cell.

In IE7 it looks like the menu is within the borders, but somehow the right border of the table cell does not show. Top and bottom border of table cell continues some 4 to 5 pixels to the right of the right side of the menu, but the right border of the table cell are not visible....

QUESTION 2:
For most of my vertical menus I want it to be placed within a table cell which will have a fixed width.
I would like the menu not to be wider than the fixed width of the table cell, no matter what the content of the menuitems would be.
So let say a site admin enters Homeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
for the item text and the table cell was set to 150 px wide then the text that does not fit within the boundaries of the table should not be visible.

Is that possible to accomplish?
If so it would be nice to se an example on how to make it work.

Anyway.... have looked around on your site and looked at the examples which looks really nice. Like the way the menu detect if there is no room for the submenu because of a narrow viewport and then decides to show the submenu on the oposite of the parent menu (awesome work)...
also like the way the menu handles the situation where there is not enough space to show all the menuitems of a submenu because of lack of space in the viewport... very intuitive (and a lot better than it was done in Deluxe-Menu... where it is scrolling... which may cause the visitor to belive there is no more options ... and therefore leaves the menu or page/site)...

Best regards

BELOW are code rel. to question 1:

Code: Select all

<table>
<tr>
<td style="border:1px solid red; width:150px">
<script>
with(milonic=new menuname("Main Menu")){
style=menuStyle;
alwaysvisible=1;
orientation="vertical";
position="relative";
menuwidth="100%";
itemwidth="100%";
aI("text=Home;url=http://milonic.com/;status=Back To Home Page;");
aI("text=Menu Samples;showmenu=Samples;");
aI("text=Milonic;showmenu=Milonic;");
aI("text=Partners;showmenu=Partners;");
aI("text=Links;showmenu=Links;");
aI("text=My Milonic;showmenu=My Milonic;");
}
drawMenus();
</script>
</td>
</tr>
</table>

Post by **Ruth** » Sun Apr 15, 2007 2:43 am

Hi,

You need to give us more detail in the post to test things. Either a test page, which would be easier since all data would be there, or you need to post all the page html, all the css, and all the menu_data.js file, not just the part in the table, since that doesn't give us the menuStyle you're using. If you can't put up a test page, then put all the info in the code tags here and we can try to make a page to figure out what you need to do.

For example, you could set the menuwidth to 100% which should make it span the table cell, but, if your table cell expands on the page, and in some browsers I would guess it might, then your 2nd part won't be correct because the menu would expand however much your table cell expands so the words wouldn't wrap around into a second line and so on. This is only a guess at what might work.

Ruth

bongobongo · Post by **bongobongo** » Sun Apr 15, 2007 8:49 am

Hi again.

Okay.... do not look at the attached example.
The reason for that is because I just want to know the best way of doing what I want in Q1 and Q2.

In both questions you can assume that the table cell is 200px wide.

QUESTION 1:

I want a vertical (forgot vertical in my first post here) menu to use the width of a table cell, but not to go outside the table borders.
I would like to be able to tell menu/menuitems to use 100% of the table cell width, and not specify it in pixels (since that is specified in the stylesheet for the table).

When I say, not go outside the table borders, I do mean that only for the menu / menuitems in first level ( not the submenus / submenu items ).

How do I make this work crossbrowser?

QUESTION 2:
For most of my vertical menus I want it to be placed within a table cell which will have a fixed width (ref question 1).
I would like the menu not to be wider than the fixed width of the table cell, no matter what the content of the menuitems would be.
So let say a site admin enters Homeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
(which is something that should not be done, but sometimes admins do enter wrong text content) for the item text and the table cell was set to 200px wide then the text that does not fit within the boundaries of the table should not be visible.

In other words, I would not like the content of the menu / menuitems (on the first level menu / menuitems .... NOT the submenu / submenuitems) be able to force the width of the menu to grow wider than the width of the table cell.

Is that possible to accomplish?
If so it would be nice to se an example on how to make it work.

Best regards

Post by **Ruth** » Mon Apr 16, 2007 3:01 am

Hi,

Well, without the code, I'll guess and if it doesn't work for you, you will have to post all the code I requested in the first post. The reason is that I don't know your css and therefore I won't be able to tell if some generic css coding affects the menu and therefore requires different handling.

So, as I said in my first post, use menuwidth="100%"; and that should make it the width of the table cell. You keep saying you don't want to use pixels because that's specified in the css. What has that to do with the width of the menu, unless you are coding the menu in css.

As to the second question, again it's a guess, since using 100% width will make it expand the width of the table cell, and without code I have no idea what your table cell is going to do in the end. If it does stay 200px which I have to assume is what you're coding then the items should be automatically 200px and they should then wrap at that point. Again, this is all guess work because without your css coding, menu coding and html I have no idea what your table is actually going to do when resolution is changed on the browser.

As to cross browser, the menu is cross browser, it works in the various browsers listed at http://milonic.com/supported_browsers.php

Ruth

bongobongo · Post by **bongobongo** » Mon Apr 16, 2007 4:27 pm

Okay, here comes the full test page with problems I have and qustions and comments:
For the page to work as expected I would advice you to create a blue gif image 150px wide and 20px high and name it blue150px.gif, and then store it in same folder as the test page "attached below".

If you want me to I can send all files to a mail address.

Both the milonic_src.js and mmenudom.js was the same as when I downloaded an example menu from your site yesterday.

I do not test/evaluate any of your menus online: just on my dev computer using localhost.

Regards

Code: Select all

<html>
<head>
<title>HOW TO USE CSS to style the menus and more</title>
<script type="text/javascript" src="milonic_src.js"></script>	
<script type="text/javascript" src="mmenudom.js"></script>

<script type="text/javascript">

	with(menuStyle=new mm_style())
	{
	   
	   bordercolor="#999";
	   borderstyle="solid";
	   borderwidth=1; 
	   padding=3;
		
	   onclass="cssmouseon";
	   offclass="cssmouseoff";
	}
	

	with(milonic=new menuname("Samples")){
	overflow="scroll";
	style=menuStyle;
	aI("text=Plain Text Horizontal Style DHTML Menu Bar;url=http://milonic.com/menusample1.php;")
	aI("text=Vertical Plain Text Menu;url=http://milonic.com/menusample2.php;")
	aI("text=All Horizontal Menus;url=http://milonic.com/menusample25.php;")
	aI("text=Using The Popup Menu Function Positioned by Images;url=http://milonic.com/menusample24.php;")
	aI("text=Classic XP Style Menu;url=http://milonic.com/menusample82.php;")
	aI("text=XP Style;url=http://milonic.com/menusample86.php;")
	aI("text=XP Taskbar Style Menu;url=http://milonic.com/menusample83.php;")
	aI("text=Office XP Style Menu;url=http://milonic.com/menusample47.php;")
	aI("text=Office 2003 Style Menu;url=http://milonic.com/menusample46.php;")
	aI("text=Apple Mac Style Menu;url=http://milonic.com/menusample72.php;")
	aI("text=Amazon Style Tab Menu;url=http://milonic.com/menusample74.php;")
	aI("text=Milonic Home Menu;url=http://milonic.com/menusample78.php;")
	aI("text=Windows 98 Style Menu;url=http://milonic.com/menusample13.php;")
	aI("text=Multiple Styles Menu;url=http://milonic.com/menusample5.php;")
	aI("text=Multi Colored Menu Items;url=http://milonic.com/menusample80.php;")
	aI("text=Multi Colored Menus Using Styles;url=http://milonic.com/menusample7.php;")
	aI("text=Multi Tab;url=http://milonic.com/menusample50.php;")
	aI("text=Tab Top;url=http://milonic.com/menusample52.php;")
	aI("text=Multi Columns;url=http://milonic.com/menusample73.php;")
	aI("text=100% Width Span Menu;url=http://milonic.com/menusample26.php;")
	aI("text=Follow Scrolling Style Menu;url=http://milonic.com/menusample10.php;")
	aI("text=Menu Positioning With Offsets;url=http://milonic.com/menusample23.php;")
	aI("text=Table Based (Relative) Menus;url=http://milonic.com/menusample9.php;")
	aI("text=Opening Windows and Frames with the Menu;url=http://milonic.com/menusample11.php;")
	aI("text=Menus Over Form Selects, Flash and Java Applets;url=http://milonic.com/menusample14.php;")
	aI("text=Activating Functions on Mouseover;url=http://milonic.com/menusample15.php;")
	aI("text=Drag Drop Menus;url=http://milonic.com/menusample22.php;")
	aI("text=Menus with Header Type Items;url=http://milonic.com/menusample8.php;")
	aI("text=Right To Left Openstyle;url=http://milonic.com/menusample65.php;")
	aI("text=Up Openstyle Featuring Headers;url=http://milonic.com/menusample33.php;")
	aI("text=DHTML Menus and Tooltips;url=http://milonic.com/menusample6.php;")
	aI("text=Unlimited Level Menus Example;url=http://milonic.com/menusample67.php;")
	aI("text=Context Right Click Menu;url=http://milonic.com/menusample27.php;")
	aI("text=Menus built entirely from images;url=http://milonic.com/menusample18.php;")
	aI("text=Static Images Sample;url=http://milonic.com/menusample16.php;")
	aI("text=Rollover Swap Images Sample;url=http://milonic.com/menusample17.php;")
	aI("text=Background Item Images;url=http://milonic.com/menusample20.php;")
	aI("text=Background Image Buttons;url=http://milonic.com/menusample89.php;")
	aI("text=Menu Background Images;url=http://milonic.com/menusample76.php;")
	aI("text=Creating Texture with Menu Background Images;url=http://milonic.com/menusample19.php;")
	aI("text=Static Background Item Images;url=http://milonic.com/menusample71.php;")
	aI("text=Vertical Static Background Item Images;url=http://milonic.com/menusample87.php;")
	aI("text=World Map Sample;url=http://milonic.com/menusample92.php;")
	aI("text=US Map Sample;url=http://milonic.com/menusample91.php;")
	aI("text=Image Map Sample;url=http://milonic.com/menusample4.php;")
	aI("text=Rounded Edges Imperial Style;url=http://milonic.com/menusample21.php;")
	aI("text=Corporation;url=http://milonic.com/menusample40.php;")
	aI("text=International;url=http://milonic.com/menusample70.php;")
	aI("text=Clean;url=http://milonic.com/menusample32.php;")
	aI("text=3D Gradient Block;url=http://milonic.com/menusample57.php;")
	aI("text=Descreet;url=http://milonic.com/menusample42.php;")
	aI("text=Agriculture;url=http://milonic.com/menusample41.php;")
	aI("text=Breeze;url=http://milonic.com/menusample29.php;")
	aI("text=Chart;url=http://milonic.com/menusample66.php;")
	aI("text=Cartoon;url=http://milonic.com/menusample77.php;")
	aI("text=Start Button Menu;url=http://milonic.com/menusample69.php;")
	aI("text=Tramline;url=http://milonic.com/menusample54.php;")
	
	}
	
	with(milonic=new menuname("Milonic")){
	style=menuStyle;
	aI("text=Product Purchasing Page;url=http://milonic.com/cbuy.php;");
	aI("text=Contact Us;url=http://milonic.com/contact.php;");
	aI("text=Newsletter Subscription;url=http://milonic.com/newsletter.php;");
	aI("text=FAQ;url=http://milonic.com/menufaq.php;");
	aI("text=Discussion Forum;url=http://milonic.com/forum/;");
	aI("text=Software License Agreement;url=http://milonic.com/license.php;");
	aI("text=Privacy Policy;url=http://milonic.com/privacy.php;");
	}
	
	with(milonic=new menuname("Partners")){
	style=menuStyle;
	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;
	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;
	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;
	aI("text=Login;url=http://milonic.com/login.php;");
	aI("text=Licenses;url=http://milonic.com/mylicenses.php;");
	aI("text=Invoices;url=http://milonic.com/myinvoices.php;");
	aI("text=Make Support Request;url=http://milonic.com/reqsupport.php;");
	aI("text=View Support Requests;url=http://milonic.com/mysupport.php;");
	aI("text=Your Details;url=http://milonic.com/mydetails.php;");
	}
	
	
	
	
	// SUBMENUS FOR MENU 2
	with(milonic=new menuname("Samples2")){
	overflow="scroll";
	style=menuStyle;
	aI("text=Plain Text Horizontal Style DHTML Menu Bar;url=http://milonic.com/menusample1.php;")
	aI("text=Vertical Plain Text Menu;url=http://milonic.com/menusample2.php;")
	aI("text=All Horizontal Menus;url=http://milonic.com/menusample25.php;")
	aI("text=Using The Popup Menu Function Positioned by Images;url=http://milonic.com/menusample24.php;")
	aI("text=Classic XP Style Menu;url=http://milonic.com/menusample82.php;")
	aI("text=XP Style;url=http://milonic.com/menusample86.php;")
	aI("text=XP Taskbar Style Menu;url=http://milonic.com/menusample83.php;")
	aI("text=Office XP Style Menu;url=http://milonic.com/menusample47.php;")
	aI("text=Office 2003 Style Menu;url=http://milonic.com/menusample46.php;")
	aI("text=Apple Mac Style Menu;url=http://milonic.com/menusample72.php;")
	aI("text=Amazon Style Tab Menu;url=http://milonic.com/menusample74.php;")
	aI("text=Milonic Home Menu;url=http://milonic.com/menusample78.php;")
	aI("text=Windows 98 Style Menu;url=http://milonic.com/menusample13.php;")
	aI("text=Multiple Styles Menu;url=http://milonic.com/menusample5.php;")
	aI("text=Multi Colored Menu Items;url=http://milonic.com/menusample80.php;")
	aI("text=Multi Colored Menus Using Styles;url=http://milonic.com/menusample7.php;")
	aI("text=Multi Tab;url=http://milonic.com/menusample50.php;")
	aI("text=Tab Top;url=http://milonic.com/menusample52.php;")
	aI("text=Multi Columns;url=http://milonic.com/menusample73.php;")
	aI("text=100% Width Span Menu;url=http://milonic.com/menusample26.php;")
	aI("text=Follow Scrolling Style Menu;url=http://milonic.com/menusample10.php;")
	aI("text=Menu Positioning With Offsets;url=http://milonic.com/menusample23.php;")
	aI("text=Table Based (Relative) Menus;url=http://milonic.com/menusample9.php;")
	aI("text=Opening Windows and Frames with the Menu;url=http://milonic.com/menusample11.php;")
	aI("text=Menus Over Form Selects, Flash and Java Applets;url=http://milonic.com/menusample14.php;")
	aI("text=Activating Functions on Mouseover;url=http://milonic.com/menusample15.php;")
	aI("text=Drag Drop Menus;url=http://milonic.com/menusample22.php;")
	aI("text=Menus with Header Type Items;url=http://milonic.com/menusample8.php;")
	aI("text=Right To Left Openstyle;url=http://milonic.com/menusample65.php;")
	aI("text=Up Openstyle Featuring Headers;url=http://milonic.com/menusample33.php;")
	aI("text=DHTML Menus and Tooltips;url=http://milonic.com/menusample6.php;")
	aI("text=Unlimited Level Menus Example;url=http://milonic.com/menusample67.php;")
	aI("text=Context Right Click Menu;url=http://milonic.com/menusample27.php;")
	aI("text=Menus built entirely from images;url=http://milonic.com/menusample18.php;")
	aI("text=Static Images Sample;url=http://milonic.com/menusample16.php;")
	aI("text=Rollover Swap Images Sample;url=http://milonic.com/menusample17.php;")
	aI("text=Background Item Images;url=http://milonic.com/menusample20.php;")
	aI("text=Background Image Buttons;url=http://milonic.com/menusample89.php;")
	aI("text=Menu Background Images;url=http://milonic.com/menusample76.php;")
	aI("text=Creating Texture with Menu Background Images;url=http://milonic.com/menusample19.php;")
	aI("text=Static Background Item Images;url=http://milonic.com/menusample71.php;")
	aI("text=Vertical Static Background Item Images;url=http://milonic.com/menusample87.php;")
	aI("text=World Map Sample;url=http://milonic.com/menusample92.php;")
	aI("text=US Map Sample;url=http://milonic.com/menusample91.php;")
	aI("text=Image Map Sample;url=http://milonic.com/menusample4.php;")
	aI("text=Rounded Edges Imperial Style;url=http://milonic.com/menusample21.php;")
	aI("text=Corporation;url=http://milonic.com/menusample40.php;")
	aI("text=International;url=http://milonic.com/menusample70.php;")
	aI("text=Clean;url=http://milonic.com/menusample32.php;")
	aI("text=3D Gradient Block;url=http://milonic.com/menusample57.php;")
	aI("text=Descreet;url=http://milonic.com/menusample42.php;")
	aI("text=Agriculture;url=http://milonic.com/menusample41.php;")
	aI("text=Breeze;url=http://milonic.com/menusample29.php;")
	aI("text=Chart;url=http://milonic.com/menusample66.php;")
	aI("text=Cartoon;url=http://milonic.com/menusample77.php;")
	aI("text=Start Button Menu;url=http://milonic.com/menusample69.php;")
	aI("text=Tramline;url=http://milonic.com/menusample54.php;")
	
	}

	with(milonic=new menuname("Milonic2")){
	style=menuStyle;
	aI("text=Product Purchasing Page;url=http://milonic.com/cbuy.php;");
	aI("text=Contact Us;url=http://milonic.com/contact.php;");
	aI("text=Newsletter Subscription;url=http://milonic.com/newsletter.php;");
	aI("text=FAQ;url=http://milonic.com/menufaq.php;");
	aI("text=Discussion Forum;url=http://milonic.com/forum/;");
	aI("text=Software License Agreement;url=http://milonic.com/license.php;");
	aI("text=Privacy Policy;url=http://milonic.com/privacy.php;");
	}
	
	with(milonic=new menuname("Partners2")){
	style=menuStyle;
	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("Links2")){
	style=menuStyle;
	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 Spam2;text=Anti Spam Tools;");
	}
	
	with(milonic=new menuname("Anti Spam2")){
	style=menuStyle;
	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("MyMilonic2")){
	style=menuStyle;
	aI("text=Login;url=http://milonic.com/login.php;");
	aI("text=Licenses;url=http://milonic.com/mylicenses.php;");
	aI("text=Invoices;url=http://milonic.com/myinvoices.php;");
	aI("text=Make Support Request;url=http://milonic.com/reqsupport.php;");
	aI("text=View Support Requests;url=http://milonic.com/mysupport.php;");
	aI("text=Your Details;url=http://milonic.com/mydetails.php;");
	}

	

</script>

<style type="text/css">
	.cssmouseon { 
		background-color: #FEFAD2;
		color: #000;
		font-face: arial, sans-serif;
		padding:3px;
		text-decoration: underline;
		overflow:hidden; /* this actually works in opera and FF, but not in IE where table is wider, try set overflow:hidden on table */
		border: 1px solid #888;
		
		
	}
	
	.cssmouseoff { 
		background-color: #F5F5F5;
		color: #000000;
		font-face: arial, sans-serif;
		padding:3px;
		text-decoration: none;
		overflow: hidden;
		border: 1px solid transparent;
		
		
		
	}
	
	
	
	
</style>

<head>
<body>
<p style="padding:10px; background-color:#bbbbbb; font-face:arial,sans-serif; font-size:14px; border:2px solid red;">
Please look at the two menu examples below.<br><br>

Also note that I would like to make it work using as few styling parameters in the <br>
with(menuStyle=new mm_style()) part as possible. The less I have to put there the better.<br>
Want to use as much CSS as possible... but in this styling it is a combination of javascript styling and pure css.... (because I'm lost I guess)<br><br>

In both examples I try to put a vertical menu inside a table cell with a fixed width<br><br>
I do not want the width of the menu and top level items to not go outside the table cell<br>
I would also like both the menus to work using as much CSS as possible.<br><br>

I have put up one image above the menu which is 150px wide as well as one table cell to the<br>
right of the table cell containing the menu. Also with a the same image to see if the menu<br>
either forces the menu table cell to get wider or to check if the menu floats outside the right<br>
border of the table cell containing the menu.<br><br>

<strong>QUESTIONS:<br>
How do I make first and second menu look the same in the supported browsers?<br>
As well as making sure the toplevel menu/menuitems does not go outside the right side of the table cell or force the table cell to be wider than it should be?</strong><br><br>
Please also see my comments below the first and second menu. 
I also tried to use menuwidth=150px and itemwidth=150px but for some browsers the menu forces the table cell to get wider than it should.<br>
Setting menu/item width in pixels did make the second menu look better in IE6 and IE7 in relation to the long string though.<br><br>

<strong>How to style this?</strong><br>
I would also like to know how I can make a 1px border around the top level menu with a padding of 3px.<br>
Then for the items I would like to have a border on mouseover but not on normal state.<br>
Just look at the submenus on main menu on milonic.com to see what I mean.<br><br>

<strong>How to style this?</strong><br>
Then I would like to be able to create a toplevel menu that has similar look to this example of yours:<br>
http://milonic.com/menusample2.php<br>
Also using CSS as much as possible. How do I style to make that work.

<br><br>
All tested on Win XP Pro service pack 2.<br>
For browsers used see comment below the first menu.<br>
</p>
<br>


<table border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<table border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td align="left" style="padding:0; margin:0;">
						<img src="blue150px.gif" height="20px" width="150px" border="0" alt="">
					</td>
				</tr>
			</table>
		</td>
	</tr>
	
	<tr>
		<td>
			<table border="0" cellpadding="0" cellspacing="0">
			<tr>
			<td style="width:150px; padding-top:10px;">
			
			<script>
			/*
			with(milonic=new menuname("Main Menu")){
			style=menuStyle;
			alwaysvisible=1;
			orientation="vertical";
			position="relative";
			menuwidth="100%";
			itemwidth="100%";
			aI("text=Home;url=http://milonic.com/;status=Back To Home Page;");
			aI("text=Menu Samples;showmenu=Samples;");
			aI("text=Milonic;showmenu=Milonic;");
			aI("text=Partners;showmenu=Partners;");
			aI("text=Links;showmenu=Links;");
			aI("text=My Milonic;showmenu=My Milonic;");
			}
			*/
			
			with(milonic=new menuname("Main Menu")){
				_menuCloseDelay=600;
				_menuOpenDelay=100;
				_subOffsetTop=0;
				_subOffsetLeft=0;
				
				offborder='1px solid #aaaaaa';
				
			alwaysvisible=1;
			// left=10;
			position="relative";
			orientation="vertical";
			style=menuStyle;
			
			menuwidth="100%"; 
			itemwidth="100%";
			
			/*
			menuwidth="150px";
			itemwidth="150px";
			*/
			
			// menuwidth="150px";
			
			// top=10;
			aI("text=Home;url=http://milonic.com/;");
			aI("showmenu=Samples;text=MenuSamples;");
			aI("showmenu=Milonic;text=Milonic;");
			aI("showmenu=Partners;text=Partners;");
			aI("showmenu=Links;text=Links;");
			aI("showmenu=MyMilonic;text=My Milonic;");
			}
			
			drawMenus();
			</script>
			
			</td>
			<td valign="top" style="padding:0; margin:0;">
				<img src="blue150px.gif" height="20px" width="150px" border="0" alt="">
				
			</td>
			</tr>
			</table>
		</td>
	</tr>
	
	<tr>
		<td style="padding:10px; background-color:#bbbbbb; font-face:arial,sans-serif; font-size:14px; border:2px solid red;">
			For the menu above:<br>
			Image above and to the right of the menu is 150 px wide and should be placed on the right side of the menu<br>
				with no pixels in between menu and blue image.
				<br><br>
				In FF 2.0.0.3 the menu is wider than the table cell by 2 pixels, how can I fix that.<br>
				In IE7 it gets correct and menu is exactly the width of the blue image above the menu.<br>
				In IE6 the transparent color does not seem to work and the menuitems get a black border.<br>
				In Opera 9.02 the right border of the menu is not visible.<br>
				In NE 8.1.2 the tablecell is made wider and the menu extends outside the table cell on the right side as well.<br>
				
				<br>
		</td>
	</tr>
</table>

<br>
In my last menuexample on the page I have made one of menuitems text so long that it no longer
have room within the width of the table cell (menu).<br>
What I would like to happen when the site admins enter such stuff (which is wrong but may happen)<br>
is that the menu (ideally for me) should not get any wider than specified in px or wider than the<br>
surrounding table cell when using 100% width for the menu.<br><br>
The reason I would like the menu not to be forced wider by it's content is because I do not want the<br>
layout of the page to be broken by the content of the menu.<br><br>
Is that possible to accomplish? If so, how do I do it?

<br><br>
<table border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<table border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td align="left" style="padding:0; margin:0;">
						<img src="blue150px.gif" height="20px" width="150px" border="0" alt="">
					</td>
				</tr>
			</table>
		</td>
	</tr>
	
	<tr>
		<td>
			<table border="0" cellpadding="0" cellspacing="0">
			<tr>
			<td style="width:150px; padding-top:10px;">
			
			<script>
			/*
			with(milonic=new menuname("Main Menu")){
			style=menuStyle;
			alwaysvisible=1;
			orientation="vertical";
			position="relative";
			menuwidth="100%";
			itemwidth="100%";
			aI("text=Home;url=http://milonic.com/;status=Back To Home Page;");
			aI("text=Menu Samples;showmenu=Samples;");
			aI("text=Milonic;showmenu=Milonic;");
			aI("text=Partners;showmenu=Partners;");
			aI("text=Links;showmenu=Links;");
			aI("text=My Milonic;showmenu=My Milonic;");
			}
			*/
			
			with(milonic=new menuname("Main Menu2")){
				_menuCloseDelay=600;
				_menuOpenDelay=100;
				_subOffsetTop=0;
				_subOffsetLeft=0;
				
				offborder='1px solid #aaaaaa';
				
			alwaysvisible=1;
			// left=10;
			position="relative";
			orientation="vertical";
			style=menuStyle;
			
			
			menuwidth="100%";  
			itemwidth="100%";
			
			/*
			menuwidth="150px";
			itemwidth="150px";
			*/
			
			// menuwidth="150px";
			
			// top=10;
			aI("text=Home;url=http://milonic.com/;");
			aI("showmenu=Samples2;text=MenuSamplesToWideToFitInTableCell;");
			aI("showmenu=Milonic2;text=Milonic;");
			aI("showmenu=Partners2;text=Partners;");
			aI("showmenu=Links2;text=Links;");
			aI("showmenu=MyMilonic2;text=My Milonic;");
			}
			
			drawMenus();
			</script>
			
			</td>
			<td valign="top" style="padding:0; margin:0;">
				<img src="blue150px.gif" height="20px" width="150px" border="0" alt="">
				
			</td>
			</tr>
			</table>
		</td>
	</tr>
	
	<tr>
		<td style="padding:10px; background-color:#bbbbbb; font-face:arial,sans-serif; font-size:14px; border:2px solid red;">
			The menu above behave a little different in browsers because of the long string "MenuSamplesToWideToFitInTableCell":<br>
			FF: Same as for the first menu, but not any new stuff caused by the long string.<br>
			IE7: Definitely not what I want. The long string force the table cell to grow wider (see blue image to the right of the menu).<br>
			IE6: Same as for IE7 except that here the main menu is displayed witht he full forced width.<br>
			  But when I mouse over the main menu then menu get clipped, but table cell still to wide only showing empty space.<br>
			OP: Same as for the first menu, but not any new stuff caused by the long string.<br>
			NE: Same as for the first menu, but now something weird happens, quirks for NE below:<br>
			  1. Every time I mouse over one of the items in main menu, the main menu gets some pixels wider.. just keeps growing every<br>
			  time I mouse over an item. It actually grows a few pixels after page has loaded without mousing over as well.<br>
			  2. And first time I mouse over the MenuSamplesToWide... item the submenu only show the first 10 pixels or so<br>
			of the menu item text. The next time I mouse over this item then submenu shows up correctly.<br><br>
			The quirks in NE may have something with my way of using the menu.... I'm trying to learn how to use it...
			
		</td>
	</tr>
	
</table>

</body>
</html>

Post by **Ruth** » Tue Apr 17, 2007 1:54 am

... note that I would like to make it work using as few styling parameters in the <br>
with(menuStyle=new mm_style()) part as possible.

This would be your css

Code: Select all

body{margin:10px}
.cssmouseon { 
      background-color: #FEFAD2; 
      color: #000; 
      font-face: arial, sans-serif; 
      text-decoration: underline; 
      border: 1px solid #888; 
      width:136px;
	  
   } 
    
   .cssmouseoff { 
      background-color: #F5F5F5; 
      color: #000000; 
      font-face: arial, sans-serif;
      text-decoration: none; 
      border:1px solid #F5F5F5; 
      width:136px;
   }

This would be your data file, that is the one with the sub menus in it, though I didn't repost the subs here. It will also include the styling you need to put in that menuStyle section, only the border, padding and the call for the classes you are using to style the menu in css. NOTE: padding has been changed to 2px, explanation below.

Code: Select all

_menuCloseDelay=600; 
_menuOpenDelay=100; 
_subOffsetTop=0; 
_subOffsetLeft=0; 
             
with(menuStyle=new mm_style()){ 
bordercolor="#999"; 
borderstyle="solid"; 
borderwidth=1;
padding=2;
onclass="cssmouseon"; 
offclass="cssmouseoff";
   }

rest of submenus here, as in your post 

drawMenus();

here's the page with the menu and only one table.

Code: Select all

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

<html>
<head>
	<title>HOW TO USE CSS to style the menus and more</title> 
<LINK href="stylesheet1.css" type=text/css rel=stylesheet>
<script type="text/javascript" src="milonic_src.js"></script>    
<script type="text/javascript" src="mmenudom.js"></script> 
<script type="text/javascript" src="subs_data.js"></script> 

</head>

<body>

<table cellpadding="0" cellspacing="0" border="0"> 
<tr><td><img src="blue150px.gif" height="20px" width="150px" border="0" alt=""> </td><td></td></tr>
<tr> 
         <td> 
          <script> 
         with(milonic=new menuname("Main Menu2")){ 
         alwaysvisible=1; 
         position="relative"; 
         style=menuStyle;
		 margin=3; 
         aI("text=Home;url=http://milonic.com/;"); 
         aI("showmenu=Samples2;text=MenuSamples;"); 
         aI("showmenu=Milonic2;text=Milonic;"); 
         aI("showmenu=Partners2;text=Partners;"); 
         aI("showmenu=Links2;text=Links;"); 
         aI("showmenu=MyMilonic2;text=My Milonic;"); 
         } 
         drawMenus(); 
         </script> 
         </td> 
         <td valign="top" width='150px'> 
            <img src="blue150px.gif" height="20px" width="150px" border="0" alt=""> 
         </td> 
         </tr> 
         </table> 

</body>
</html>

EXPLANATION:

1. To have a border all around the outside of the menu, you must code that in the menuStyle. The border that you code in the css mouseoff and mouseon classes is a border that goes around each item, equivalent to the offborder/onborder properties of the menu.

2. To get the 'padding' you use margin and it is coded in the particular menu, that is why you see that margin=3; in your main menu. This will put space between the border of the menu and the border of the items. This will only show when you mouseon since there is neither an offborder on the items, nor a menubgcolor specified, so that margin area will take the offbgcolor, I believe.

3. as to getting them all the same in all browsers, I got it as close as I could. I believe it looks the same in both IE and FF or at least within 1px. Note the size I put in the css, width:136px; That is because that css applies to each item width, not the menu width. So, the actual item width if you want the menu to be 150 px and are using padding of 2px [I changed it because FF seemed to not want to set up right with odd numbers of pixels - I don't know why] and margin=3px to get that space between the menu border and the item borders, then that would be 3+2+2+3. That should be 140, but then you have the borders of 1 px on the menu, and 1px on the items [2 for the menu border and 2 for the item borders] so that's 150 minus 14px or 136.

Finally, the reason I put padding in the menuStyle is that no matter what I did I could not get it to work correctly in FF when I put it in the css. Again, I don't know why. I'm not much on css.

Hope this helps.

Ruth

Post by **Ruth** » Tue Apr 17, 2007 8:20 am

Hi again,

Sorry, I forgot the one you asked about not having the item go larger than the table cell, that is not having it make the cell expand. Your scenario of this looooooooooooong word being split is not going to happen, it only knows it's a word, so it can't split it. Now if there were a lot of words, it would then wrap, but it has no way to know anything about splitting words.

Ruth

bongobongo · Post by **bongobongo** » Sat May 05, 2007 8:28 am

Hi Ruth and thanks for your replies.

Regarding the looooooooong word.

I did not want the menu to split the word (if that was possible it would be great though).

I just would like the menu to not grow wider than it's surrounding container (or the width it is supposed to have either using fixed width in pixels or by setting width to 100% of it's parent container).

Mainly because I would like to use the menu in a left or right containter on the page, and would like to have a way to prevent the layout of the page to be broken when some site-admin enters a word (or whatever) that does not fit in the parent container layout.

Basically I'm looking for a "similar" behaviour as when you are using
overflow:hidden; on a container.

But I would like that to be applied to the menuitem itself.

If the menu was working like that then the site-admin could sleep well knowing that no matter what an editor throws at the menuitems they will not force the menuwidth to grow wider than it was supposed to, and will not break the layout of the page.

Anyway... thanks for your information regarding the CSS question as well.
Getting my example layout to work using CSS was not as easy as I hoped .... have to reconsider how to use the menu.
Maybe I can use the menu .... using only javascript parameters...

Best regards

Post by **Ruth** » Sun May 06, 2007 5:47 am

Hi,

Not possible to split the word, unless you do it manually with a hyphen and an ending space before the rest of the word, which should then wrap, or do it manually with a hyphen and coding in a line-break in the word where you want it to split down to the next line.

As to the width, if you have the div set to be a fixed size, then the menuwidth="100%"; and positioned relatively in the div shouldn't expand the div. The words, if an item is long should wrap.

Ruth