Setting up a separator image in tree menu.

Poster: ripnoel
Dated: Thursday December 6 2007 - 1:18:45 GMT

I must be missing a setting or something to get my custom separator image set up in this tree menu. Here is my style file and I am certain my image is on the server in the js folder.
---------------------
with(tstyle1=new mm_style()){
offcolor = "#ffffff";
onbgcolor = "#D70B0B";
oncolor = "#FFFFFF";
offbgcolor="#C65900"
ondecoration="underline"
borderstyle = "solid";
subimage="white_arrow.gif"
onsubimage="white_arrow_down.gif"
bordercolor="black"
borderwidth=0
padding = 8
fontsize = "11px";
fontweight="bold";
fontfamily = "arial, verdana, tahoma";
subimageposition="top right" ;
//separatorsize=2
separatorimage="orangeSeparator.gif";
separatorwidth=200
//separatorcolor="#B05000";
image="trans.gif"
subimagepadding=3
imagepadding=2
itemwidth=240
}
-------------------------------------------

The page can be previewd here although I'm changing it frequently trying to get it customized:

http://www.abacusarts.com/fst/index.html

Thanks,

Rip

Oh, one other question... how can I set this up so the top 4 main menu "offbgcolor" settings are one color and the remaining main menu items have another "offbgcolor". THX Rip

Re: Setting up a separator image in tree menu.

Poster: ripnoel
Dated: Thursday December 6 2007 - 1:39:55 GMT

Figured out how to add the offbgcolor as an in-line style at each item in the js file....so just some help with the separator image will get me there I believe.

Rip

Re: Setting up a separator image in tree menu.

Poster: Ruth
Dated: Thursday December 6 2007 - 19:42:43 GMT

Hi,

The separator image issue has to do with where the image is. I cannot find it, I've tried every combination of url to try and find it but no luck. Where is that image? Also, you have the blue and red blip listed which are not appearing because they don't seem to be there either.

Ruth

Re: Setting up a separator image in tree menu.

Poster: ripnoel
Dated: Thursday December 6 2007 - 20:16:50 GMT

The image is here:

http://www.abacusarts.com/fst/js/mainVe ... arator.gif

I guess what I'm not clear on is whether to code the path from where the collapse_data.js file is located or from the page calling this file... sorry for my confusion.

Rip

Re: Setting up a separator image in tree menu.

Poster: Ruth
Dated: Thursday December 6 2007 - 20:53:17 GMT

Oh how I hate paths. I have to tell you, I cheat, I just put all the milonic files into one folder including the images, then I only have to put the image names in the data file. It's very hard on someone else's site to figure out their paths so usually I tell them to code the data file with the full path to the image, if they don't want to put them in the same folder.

I have only one issue to solve and I'll post everything back here for you.

Ruth

Re: Setting up a separator image in tree menu.

Poster: Ruth
Dated: Friday December 7 2007 - 1:01:16 GMT

Hi Rip,

OK, I got it. I put everything in a zip file. Because I work on my desktop with so many different pages that use different directory structures on their websites, I just put everything into one folder. This means you'll have to change all the image links and such. I see you use dreamweaver, and I'm not familiar with that, but I wanted you to know I made some changes to your layout so that when the menu was clicked it did not shift the layout down. It looks just the same, but these are the changes.

1. The left column at this point

Is now this

The right corresponding column

Is now this

And, the center part


Is now this

You'll see them on the page, but I thought it easier if I posted the starts of the changes. The reason for this has to do with the treemenu being in the table. The changes prevent the layout from shifting. In the original when the submenus opened it caused the table to expand down to accommodate the menu, this in turned caused the other tables and cells to shift down. For example, because that center table was valign=bottom, when that surrounding cell got longer it shifted down. So, I made it valign top and just made the transparent spacer height=91 instead of 1.

Here is the file with the new images, the data files, the page with the codes in the right places and the css file is new because it contains new classes that I put on the page to get the layout to not shift.

http://support.milonic.com/ruth/rip.zip

I put new images in the menu, saw you had blocked the subimages so I put new ones that are actually images at the left of the items that open a submenu, and the click image looks like a check mark. If you decide you want a different image than the arrow, or the check marks you need to make them the same size, it was through the use of images that I got the text to shift in the submenus. When you do that you have to be careful because if the item text is very wide it will cause the submenu to become wider and hang over outside the main menu.

Hope this helps. Also, there is an update to the menu so you might want to download that, you need to be logged in on the main site under the name you used when you purchased the license. Make sure you save your existing milonic_src, mmenudom, mmenuns4 files someplace so you can have them in case there is a problem with the new one. If you want to be notified of menu updates go to this topic and subscribe to it.

viewtopic.php?f=10&t=3108

Ruth

Re: Setting up a separator image in tree menu.

Poster: Ruth
Dated: Friday December 7 2007 - 6:21:50 GMT

Hi,

I forgot one thing about the separator. Whether you use an image or just separatorcolor, because you have sized it to be less wide than the menu, you will see space on the right and left of it and the offbgcolor you have set in the style. There isn't anything that can be done about that. If you were using only the one color, the top orange color, it wouldn't really show because it is the same as the offbgcolor of the item, but since you have change the offbgcolor for the bottom items, there's no way to cover that up.

What's happening is that when you don't set a menubgcolor, it takes the offbgcolor by default. Even if you set a menubgcolor you would see whatever that color was in that separator space. Even though the separators are set to be smaller the space they take up goes across the whole menu. So, the best thing would be to actually make them the full width. If you decide to use color instead of image just set separatorsize=1 and the separatorcolor, if you are going to use the image, you need to set separatorwidth= and separatorsize=. Using separator images requires that either separatorheight or separatorwidth is set.

Ruth