Tree menu ~ submenu offset with full width highlighting

[ripnoel]

Trying to setup Tree menu and would like to offset the text of the submenus but keep the highlighting of each submenu covering the full menu width justifing with the main menu item above...just offestting the submenu text only.

Have played around with this for a while and can't seem to be able to make this happen.

Any help appreciated.

Rip

[Ruth]

Hi Rip,

For any kind of design issue like this we need to see the page so we can work on the menu in the setting where it is going to reside, especially with the collapse menu which when relatively positioned has all of the menu including subs opening inside a div or table cell.

Ruth

[ripnoel]

Sorry forgot to include that link.

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

The .js file is now here:
http://www.abacusarts.com/fst/js/mainVe ... se_data.js

Rip

[ripnoel]

Also here is the top of the .js file:
-------------------------------------------------
AllMargin=0

treeOffset=0; // Used to set the offset of sub menus
singleMasterMenu=true // Informs the system to on;y have one menu open at a time

with(tstyle1=new mm_style()){
offcolor = "#ffffff";
onbgcolor = "#535353";
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
}


sub1Style=new copyOf(tstyle1)
sub1Style.offcolor = "#ffffff";
sub1Style.offbgcolor="#818181"
sub1Style.separatorcolor="#556E8C"
sub1Style.itemwidth=240


sub2Style=new copyOf(tstyle1)
sub2Style.offcolor = "#000000";
sub2Style.offbgcolor="#D6DDE6"
sub2Style.separatorcolor="#8EA2BB"


tstyle1.clickcolor="#B35100"
tstyle1.clickbgcolor="#E4E4D6"
tstyle1.clickimage="red_blip.gif"
tstyle1.clicksubimage="white_arrow_down.gif"


with(new menuname("main Tree Menu")){
top=15
left=20
style = tstyle1;
alwaysvisible = 1;
//itemwidth=240
//margin=AllMargin
position="relative"
aI("text=Proteins;showmenu=Proteins;type=tree;image=blue_blip.gif;overimage=red_blip.gif");
aI("text=Carbohydrates;showmenu=Carbohydrates;type=tree;image=blue_blip.gif;overimage=red_blip.gif");
aI("text=Biophysics;showmenu=Biophysics;type=tree;image=blue_blip.gif;overimage=red_blip.gif");
aI("offbgcolor=#ADADAD;text=Facilities & Equipment;showmenu=Finance;type=tree;image=blue_blip.gif;overimage=red_blip.gif;");
aI("offbgcolor=#ADADAD;text=News;showmenu=Sports;type=tree;image=blue_blip.gif;overimage=red_blip.gif;");
aI("offbgcolor=#ADADAD;text=Position Announcments;showmenu=Entertainment;type=tree;image=blue_blip.gif;overimage=red_blip.gif;");
aI("offbgcolor=#ADADAD;text=Apply For Graduate School;showmenu=Music;type=tree;image=blue_blip.gif;overimage=red_blip.gif;");
aI("offbgcolor=#ADADAD;text=Drop A Comment;");
aI("offbgcolor=#ADADAD;text=Site Map;");
}

with(new menuname("Proteins")){
style = sub1Style;
// margin=AllMargin
aI("text=Projects / Research;url=#");
aI("text=People;url=#");
aI("text=Publications / Presentations;url=#");
aI("text=News;url=#");
aI("text=Facilities & Equipment;url=#");
}
--------------------------------

Rip

[Ruth]

The most stable way to do this is to use images. So, since in most of them the tstyle1 has image=trans.gif; and that image applies to all of the menus, because they use the copy of method to create their style, you would need to create wider transparent images for the submenus, the first level would be x pixels wide, the next submenu level would have to be wider still to offset. Just be careful, because if you make the images too wide, when the submenu opens even if you have it set to a width, if the image and the text is wider than your set width the menu will expand wider to accommodate all of it and that would have that submenu hanging beyond the actual menu size.

I replied in the other post with all the info on your page and two menus and such but wanted to post this here for anyone who does a search for this kind of info.

Ruth