Collapsible menu sub-menu offset help

[TheStealth]

Hi, I'm a complete noob to the used of the Milonic menu system but seem to be picking up how it works. I want to use the collapsible menu but can't seem to get the sub-menu to offset the way I want.

Here is what I have so far: http://www.spiralex.net/test/

As you can see I can get the text to offset, but the lighter color of the sub-menu still remains all the way to the left, I want the offset color to be the same as the background of the web page, so white in this case. Been playing with the code for a bit and can't seem to figure it out. Any help and input would be much appreciated.

[Ruth]

Hi,

Up front so you understand, the collapse/tree menu is still under development, though many use them with no problems. The collapse menu which is what you have seems to not have problems associated with it, at least there is little request for help on it.

Having said that. Look at your style coding, note that in the sub1Style you have itemwidth=180;

Now in the sub2Style which goes with that menu that's going outside, set the itemwidth to 160.

Having said that, I think there is a better way to do this using transparent images which will ensure that no browser does something different with the offsets. It also makes each submenu color be the complete width of the whole tree while the text shifts in as you want it. You'll see what I did, added to the style section in the sub1Style a trans1.gif, and to the sub2Style a trans2.gif. They are sized to get the shift you want.


Below my name are links to various references, one set is to style, menu and item properties. Some properties can only go in one area, some in two and some in all three. Image for example can be either a style property or an item property, this allows you to put an overall image in the style section and still place a single different image for one item.

Hope this helps.

Ruth

[TheStealth]

Thanks for the help, I now have a better understanding of how the menu works.

It also makes each submenu color be the complete width of the whole tree while the text shifts in as you want it. You'll see what I did, added to the style section in the sub1Style a trans1.gif, and to the sub2Style a trans2.gif. They are sized to get the shift you want.

So if I want the sub-menu shift color to be different from that of the sub-menu itselft, I assume that I will have to include a gif of that color and properly sized to block all the underlying color? Or is there a way to do this in the style menu?

If this is not possible, do one of the other Molonic menus allow me to do this and be able to collapse the menu? Perhaps the tree menu or the original dhtml menu?

[Ruth]

Hi,

You can do almost anything with Milonic menus, that's why I like them so much.

Can you give me an idea of what you want the menu to look like so I can either set one up or give you the info on how to do it?

Ruth

[TheStealth]

If you look at the submenu color its a lighter blue. Now we see that its offset a bit, the blank bit of offset I want to be a different color from that of the sub menu itself.

[Ruth]

Hi,

Yes, you can do that. Change your sub2Style to the following

Code: Select all

sub2Style=new copyOf(tstyle1)
sub2Style.image="trans2.gif";
sub2Style.offcolor = "#000000";
sub2Style.offbgcolor="#D6DDE6";
sub2Style.separatorcolor="#8EA2BB";
sub2Style.menubgcolor="#ff0000";
sub2Style.menuwidth=201;
sub2Style.itemwidth=160;
sub2Style.borderwidth=0;

Then make the US Markets menu this code

Code: Select all

with(new menuname("US Markets")){
		style = sub2Style;
		menuwidth=201;
		itemwidth=160;
		menualign='center';
		margin=AllMargin

The menubgcolor I set to red and although the 'main' full menu is set to itemwidth=200; I set this menuwidth to 201 because that seemed to make the menu span the 200 width fully. I don't know why at 200 it seemed to leave a pixel blank on the right and I have no idea how it will look in any up to date browser..... I'm working on my old computer with IE5.5 and Firefox real olddddddd.

Ruth

[TheStealth]

Cool!! Thanks a lot.

[TheStealth]

After i updated the files to the newer versions, the menubgcolor does not work anymore.

http://www.spiralex.net/test2/

vs

http://www.spiralex.net/test <-Where I had it working.

No real code change that i know of just stopped working.

Ideas?

Code: Select all

Edit: I did some more testing and I found that if I replace the following files back to that found in the original collapse.zip it works again, but if I use the updated files it does not.  All this without changing any of the configuration.

treemenu.js
milonic_src.js
mmenudom.js
mmenuns4.js

Ideas?

[Ruth]

Hi,

It looks as if something was fixed so now you can't get that look using the setup you I had. It the only way I can see to do it is with images, or with bgimages. I'll see what I can figure out tomorrow. It's much too late right now.

Ruth

[Ruth]

Hi,

OK, I got it to work, but it does take bgimages to do it. The one advantage is that you know it will be the same in all browsers.


LINK REMOVED:

Just use your test2 page, change the name of the data file to collapse_test_images.js and make sure the images are in the folder.

By the way, I renamed your arrow images to blue and included them in the zip.

There are 5 image files, each one 1kb, the already existing trans images and 3 bgimages; 2 for sub1Style and 1 for sub2Style. The reason for 2 in sub1 is that it needs a clickbgimage also for when you click open the US Markets folder.

Ruth

[TheStealth]

Thanks Again for the help.