Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:25

Tree menu ~ submenu offset with full width highlighting


Poster: ripnoel
Dated: Thursday December 6 2007 - 3:09:46 GMT

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

Re: Tree menu ~ submenu offset with full width highlighting


Poster: Ruth
Dated: Thursday December 6 2007 - 5:55:27 GMT

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

Re: Tree menu ~ submenu offset with full width highlighting


Poster: ripnoel
Dated: Thursday December 6 2007 - 14:51:23 GMT

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

Re: Tree menu ~ submenu offset with full width highlighting


Poster: ripnoel
Dated: Thursday December 6 2007 - 14:52:54 GMT

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

Re: Tree menu ~ submenu offset with full width highlighting


Poster: Ruth
Dated: Friday December 7 2007 - 6:34:13 GMT

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