Setting up a separator image in tree menu.

[ripnoel]

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

[ripnoel]

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

[Ruth]

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

[ripnoel]

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

[Ruth]

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

[Ruth]

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

Code: Select all

<TR>
                <TD><IMG id=mainFloatingTopBG_r1_c1 height=128 alt="" 
                  src="mainFloatingTopBG_r1_c1.gif" width=10 
                  border=0 name=mainFloatingTopBG_r1_c1></TD>
                <TD vAlign=top align=left rowSpan=2>
                  <TABLE cellSpacing=0 cellPadding=0 width=958 border=0><!-- fwtable fwsrc="mainBody.png" fwpage="Page 1" fwbase="mainBody.gif" fwstyle="Dreamweaver" fwdocid = "38865963" fwnested="0" --> 

Is now this

Code: Select all

 <TR>
		<TD ROWSPAN=2 bgColor=#c0a878 vAlign=top class='lColBg'><IMG id=mainFloatingTopBg_r1_c1
		      src="mainFloatingTopBG_r1_c1.gif" width="10" height="128" border="0" name=mainFloatingTopBg_r1_c1></TD>
		<TD vAlign=top align=left rowSpan=2><TABLE cellSpacing=0 cellPadding=0 width=958
		  border=0>
		    <!-- fwtable fwsrc="mainBody.png" fwpage="Page 1" fwbase="mainBody.gif" fwstyle="Dreamweaver"
		    fwdocid = "38865963" fwnested="0" -->

The right corresponding column

Code: Select all

<TD><IMG id=mainFloatingTopBG_r1_c3 height=128 alt="" 
                  src="mainFloatingTopBG_r1_c3.gif" width=11 
                  border=0 name=mainFloatingTopBG_r1_c3></TD>

Is now this

Code: Select all

<TD ROWSPAN=2 bgColor=#c0a878 vAlign='top' class='rColBg'><img src="mainFloatingTopBG_r1_c3.gif" width="11" height="128" border="0"></TD>

And, the center part

Code: Select all

 <TR>
                      <TD background=utkLogoBG.jpg 
                      bgColor=#656565><IMG id=mainBody_r1_c1 height=96 alt="" 
                        src="mainBody_r1_c1.jpg" width=240 
                        border=0 name=mainBody_r1_c1></TD>
                      <TD vAlign=bottom align=right 
                      background=earthBG.jpg rowSpan=3>
                        <TABLE cellSpacing=0 cellPadding=0 width=697 border=0>
						<!-- fwtable fwsrc="mainBodyrtCopyArea.png" fwpage="Page 1" fwbase="mainBodyrtCopyArea.png" fwstyle="Dreamweaver" fwdocid = "1497406045" fwnested="0" -->
                          <TBODY>
                          <TR>
                            <TD><IMG id=undefined_4 height=1 alt="" 
                              src="spacer(2).gif" 
                              width=697 border=0 name=undefined_4></TD>

Is now this

Code: Select all

<TR>
		      <TD background=utkLogoBG.jpg bgColor=#656565><IMG id=mainBody_r1_c1 height=96
			    alt="" src="mainBody_r1_c1.jpg" width=240 border=0 name=mainBody_r1_c1></TD>
		      <TD vAlign=top align=right class=earth  rowSpan=3><TABLE cellSpacing=0
			cellPadding=0 width=697 border=>
			  <!-- fwtable fwsrc="mainBodyrtCopyArea.png" fwpage="Page 1" fwbase="mainBodyrtCopyArea.png"
			  fwstyle="Dreamweaver" fwdocid = "1497406045" fwnested="0" -->
			  <TR>
			    <TD><IMG id=undefined_4 height=91 alt="" src="spacer(2).gif" width=697 border=0
				  name=undefined_4></TD>

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

[Ruth]

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