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:55

collapse menu and menu height and width.


Poster: kevdog98
Dated: Tuesday September 12 2006 - 15:33:23 BST

Hi,

I camn not seem to get the collapse menu set to a menu height and or width. I can get it to set the items to a wiudth and height but not the entire menu itself. I have tried using the menuheight= and menuwidth= with no luck. Please help. Bellow is the contents of my collapse_data.js


Code:
_scrollAmount=5      // Used for Netscape 4 scrolling
_scrollDelay=10        // Used for Netscape 4 scrolling

_menuCloseDelay=500  // The delay for menus to remain visible on mouse off
_menuOpenDelay=150   // The delay for opening menus on mouse over
_subOffsetTop=0;     // Sub menu offset Top position
_subOffsetLeft=0;  // Sub menu offset Left position

Goverfilter="Alpha(style=1,opacity=25,finishOpacity=100,startX=0,finishX=100,startY=100,finishY=0);Fade(duration=0.2);Shadow(color='#777777', Direction=135, Strength=5)"
Goverfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)"
Goutfilter="randomdissolve(duration=0.3)"
Goutfilter=""
Goverfilter=""

AllMargin=0

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

with(tstyle1=new mm_style()){
offbgcolor = "#CC6666";
onbgcolor = "#A45266";
offcolor="#FFFFFF";
oncolor="#FFFFFF";
subimage="trans.gif";
onsubimage="trans.gif";
clicksubimage="mis_arrow.gif";
clickbgcolor="#A45266";
bordercolor="black"
padding = 2
fontsize = "10px";
menuheight= 114
menuwidth = 423
}



sub1Style=new copyOf(tstyle1)
sub1Style.offcolor = "#A45266";
sub1Style.offbgcolor="#8EA2BB"
sub1Style.separatorcolor="#556E8C"
sub1Style.clickcolor="#A45266"

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


tstyle1.onbgcolor = "#A45266";
tstyle1.offbgcolor = "#CC6666";

with(new menuname("main Tree Menu")){
top=0
left=0
style = tstyle1;
alwaysvisible = 1;
//margin=AllMargin
//position="relative"
aI("text=Mission;");
aI("text=What We Believe;");
aI("text=Urban Missions;showmenu=Urban;type=tree;clickimage=mis_arrow.gif;");
aI("text=Entertainment;showmenu=Entertainment;type=tree;");
aI("text=Music;showmenu=Music;type=tree;");
aI("text=Games;");
aI("text=Relationships;");
aI("text=Travel;");
aI("text=Shopping;");
menuheight= "114";
menuwidth = "423";
}

   with(new menuname("Urban")){
   style = tstyle1;
   margin=AllMargin
   aI("text=Shoulder-to-Shoulder;url=#");
   aI("text=Urban ministries;url=#");
   aI("text=Urban partners;url=#");
   aI("text=Classes;url=#");
   }


   with(new menuname("Finance")){
   style = sub1Style;
   margin=AllMargin
   aI("text=MILONIC;url=#");
   aI("text=US Markets;showmenu=US Markets;type=tree;image=lblue_blip.gif;");
   aI("text=Portfolio;url=#");
   aI("text=Watch list;url=#");
   aI("text=Price Alert;url=#");
   aI("text=Sectors;url=#");
   aI("text=Advanced Chart;url=#");
   }

      with(new menuname("US Markets")){
      style = sub2Style;
      margin=AllMargin
      aI("text=Market Snapshot;url=#");
      aI("text=Market Movers;url=#");
      aI("text=Word on The Street;url=word.php");
      aI("text=Gainers/Losers;url=#");
      aI("text=Most Actives;url=#");
      aI("text=News;url=#");
      }

   with(new menuname("Sports")){
   style = sub1Style;
   margin=AllMargin
   aI("text=MLB;url=#");
   aI("text=NBA;url=#");
   aI("text=NFL;url=#");
   aI("text=NHL;url=#");
   aI("text=College Sports;url=#");
   aI("text=Golf;url=#");
}

   with(new menuname("Entertainment")){
   style = sub1Style;
   margin=AllMargin
   aI("text=Frssh;url=#");
   aI("text=Cable TV Showcase;url=cable.php");
   aI("text=Movie Trailers;url=#");
   }

   with(new menuname("Music")){
   style = sub1Style;
   margin=AllMargin
   aI("text=Broadband Music;url=#");

   }

drawMenus()





Thank You,

Kevin


Poster: Ruth
Dated: Tuesday September 12 2006 - 17:33:53 BST

Hi,

You've got problems in your code for that main menu, try this.

Code:
with(new menuname("main Tree Menu")){
top=0;
left=0;
style = tstyle1;
alwaysvisible=1;
menuheight=114;
menuwidth=423;

//margin=AllMargin
//position="relative"
aI("text=Mission;");
aI("text=What We Believe;");
aI("text=Urban Missions;showmenu=Urban;type=tree;clickimage=mis_arrow.gif;");
aI("text=Entertainment;showmenu=Entertainment;type=tree;");
aI("text=Music;showmenu=Music;type=tree;");
aI("text=Games;");
aI("text=Relationships;");
aI("text=Travel;");
aI("text=Shopping;");
}


Also, you have menuheight and width set in the style section as if you are trying to get all the menus to have the same height and width. Those properties are not style properties, they are only menu properties and have to be put into each menu. Remove them from the style section.

Hope this helps

Ruth


Poster: kevdog98
Dated: Wednesday September 13 2006 - 16:14:20 BST

That did malke the menu the right size and width, but it also made ever collapse menu collapse to the same size and width. Is there a way to make just the menu be menuheight=114 menuwidth=423, but make the menu items be much small say width=423 height=30


Poster: Ruth
Dated: Wednesday September 13 2006 - 22:32:47 BST

I don't really know what you mean, can you give a us an image or something? Since this is a treemenu, when you click to open a submenu it will be the same width as the main menu below which it opens.

You can set itemheight= the same as you set the menuheight/menuwidth. However, if you set itemheight=30; then your menu is going to be higher than 114 since you have 9 items in the main menu and 9 x 30 = 270. Setting it at 30 makes the items look like they are 5-10 px apart from each other. So, if you can give us a picture of what you want, I'll try and see if I can set it up for you.

Ruth


Poster: kevdog98
Dated: Thursday September 14 2006 - 19:44:10 BST

Ruth:

Here is a screen shot of what I am trying to do.

Thanks.

Kevin

http://www.upc.org/collapse.gif


Poster: kevdog98
Dated: Monday September 18 2006 - 21:55:38 BST

Ruth, Do you have any update on this?


Kevin


Poster: Ruth
Dated: Tuesday September 19 2006 - 6:55:57 BST

Hi,

I'm working on it.

Ruth


Poster: Ruth
Dated: Tuesday September 19 2006 - 7:41:22 BST

Hi,

Just to make sure I understand, according to that picture you want the menu to be 114 px wide, and you want it to be 423 px high. Then you want the items to be 22 or so px high and you want all the items to sit at the top of the menu leaving the bottom part just that reddish color but empty.

If that is the case, you cannot do that with a treemenu. It's different than the regular menu in which each menu, main and subs are their own independent menus. In the treemenu, the subs are part of the 'main' menu.

Can you tell me something about the design? For example if the menu is going to be at that top left 0 position, you could create a div that would be there the height and width you wanted and the bgcolor of the menu, and just position the menu over it like you have it now.

Ruth


Poster: kevdog98
Dated: Tuesday September 19 2006 - 15:35:57 BST

Ruth:

The menu will be in the left 0 position. So what you are suggesting is creating a div that is 114px wide and 423px high, and then using the collapse menu to create a main menu with no subs? Can you give me an example?

Thanks for all your help.

Kevin


Poster: Ruth
Dated: Tuesday September 19 2006 - 18:48:58 BST

Hi Kevin,

I thought you wanted it to look like the menu was 114px wide and 423 long and it would be that size always and the submenus would open down in that area. Anyway, this is what I did: created a div on that side of the page and colored it the color of the menu bg. So the long color is the div which goes all the way up to the top. The menu sits on top of it, not in it.

EDIT: Link removed

This is what I understood you to want, however you need to be aware the menu is NOT going to stay that size if anyone sets their font size larger, it should expand to accommodate the increased font size. The only way to guarantee size is to use images.

Also, I note you have single master = false, this mean more than one submenu will be open if they click more than one, this will also make the menu go longer than the div since it will take up the necessary space it needs.

Ruth


Poster: kevdog98
Dated: Tuesday September 19 2006 - 21:50:33 BST

Thanks Ruth!

That is just what I was looking to do! Thanks for the wonderful support.

Kevin


Poster: Ruth
Dated: Wednesday September 20 2006 - 1:19:51 BST

Hi Kevin,

You're welcome. Ah, remember to remove the text I put in the div :)

If you can do it, I would suggest that you make the div and the menu 120px at least, 140 would be better, 120px let's someone who needs larger fonts go up 120%, 140 is equal to 150% increase in font size without the menu getting wider than the div. Of course, I realize that sometimes layout won't allow that.

Ruth

Open menu link in using target


Poster: kevdog98
Dated: Thursday September 28 2006 - 18:13:46 BST

Ruth:

Another problem I am running into is opening a menu link in a target, such as a table cell. Is there a way to do this. Basically, I need this menu to be able to remember the state, and stay open to the link that was clicked. Can I do this? How can I do this?


Poster: Ruth
Dated: Thursday September 28 2006 - 19:24:52 BST

Hi,

I have no idea how to open something in a table cell unless you put an iframe in the cell and open the page in that iframe.

I think you should post this as a new topic. Perhaps someone will have a solution.

Maybe title it target='some table cell' possible?

Ruth