single separator image in a menu

[dbonneville]

Hi:

Is there a more elegant or scalable way to accomplish getting a single separator image in a dropdown or vertical menu? Right now, I have to custom design an image to fit the exact width (or height on verticals) of a menu. Is there some other way to programmatically do this, other than:

(sample)

Code: Select all

...
aI("text=Set Up New Account;url=menu.htm;showmenu=incompleteAccounts");
aI("image=mySeparatorImage.gif");
aI("text=Account Statements;url=menu.htm;");
...

[Ruth]

You can use the separatorimage property: separatorimage=whatever.gif.

You might check the link for Quick Reference Guide under the DHTML Menu link on Milonic.com, or the links at the bottom of my posts for various properties, I believe they are also listed in one of the text files that come with the menu.

Ruth

[dbonneville]

That is for a global separator, though, right? I want to insert a single separator as needed in list like this, where "-------" is my separator:

Item A
Item B
Item C
---------
Item D
Item E
---------
Item F

How do you do that other than the way I mentioned?

[Ruth]

http://milonic.com/itemproperties.php It is also an item property and would be inserted as other item properties are inserted. i.e.
url=whateversite;image=whateverimage.gif[jpg etc]; and so on.

Ruth

[dbonneville]

Got it in there, but there seems to be a problem:

aI("separatorimage=images/divider_horizontal_double.gif;separatorheight=16;separatorwidth=2");

The "separatorwidth" parameter doesn't seem to work. The height works, but the width stays the same no matter what I do. Any ideas?

Doug

[Ruth]

Is the menu vertical or horizontal about which you are asking? Is it possible to post a page, or give a screen shot of what you want the thing to look like. Or to post the menu_data.js code and the separator image so we can figure out what you're trying to do. Perhaps my brain is not functioning today or something, but it seems from your posts you are putting a blank item 16px high between two other text items. Normally you'd put the separator right after the item you want it to appear below i.e.

Code: Select all

aI("text=Set Up New Account;url=menu.htm;showmenu=incompleteAccounts;separatorimage=whatever.gif, separatorheight=16;"); 
aI("text=Account Statements;url=menu.htm;"); 

Ruth

[dbonneville]

This is internal, so I can't post the page, but here is some more code:

Code: Select all

with(milonic=new menuname("Main Menu Left")){
style=mainMenu;
screenposition="top; left"
top="offset=73";
left=2;
alwaysvisible=1;
orientation="horizontal";
aI("text=<u>H</u>ome;url=menu.htm");
aI("text=<u>S</u>earch;showmenu=search;");
aI("text=<u>A</u>ccounts;showmenu=accounts;");
aI("text=<u>P</u>olicies;showmenu=policies;");
aI("text=Pay<u>m</u>ents;showmenu=payments;");
aI("text=<u>R</u>eports;showmenu=reports;");
aI("separatorimage=images/divider_vertical_double.gif;separatorwidth=10;separatorheight=16;separatorpadding=2;");
aI("text=<u>T</u>asks;showmenu=tasks;");
}

OK. This gives me very closely what I want. I'm missing some control over the spacing to the right of the separator image.

In this example, the gif I'm calling is 6px wide. The paramerter separatorwidth has no effect on it. 10 or 2, it's always 6px wide. However, I can "stretch" it to 100px high if I want. Therefore, from this example, the following is true:

- separatorwidth does not work
- separatorheight does work

I get perfect spacing when I do this:

...

Code: Select all

aI("text=<u>R</u>eports;showmenu=reports;");
aI("image=images/divider_vertical_double.gif;");
aI("text=<u>T</u>asks;showmenu=tasks;");

...

But the problem is that it now acts like a rollover. Another question would be; can you turn off rolloever functionality on an image item? Since the item is transparent (has some areas of transparency) you can see the rollover color happening behind it....

Doug[/code]

[Ruth]

Code: Select all

aI("text=<u>R</u>eports;showmenu=reports;"); 
aI("image=divider_vertical_double.gif;itemwidth=10;itemheight=16;padding=2;type=header;");
aI("text=<u>T</u>asks;showmenu=tasks;"); 
}

that's assuming all you are trying to do is put a spacer item between those two.

Ruth

[dbonneville]

Yes, yes...so the trick is calling it header to stop rollovers? That would solve it....

Doug

[Ruth]

Don't put it in as a 'separatorimage', use image=, and then control the itemwidth and height.

Ruth

[dbonneville]

Yeah, got that right away. Thanks!

What a great product and great support. Too good to be true, I think...