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

Evidence of the Incredible Shrinking Menu


Poster: Bowfonz
Dated: Saturday February 11 2006 - 20:11:09 GMT

Hi,

I'm new here. I've been looking for a drop-down menu to replace my existing boring 90's style menu. I'm very happy with the Milonic menu's flexibility and relative ease of use.

Anyhow, I'm designing my menu and besides some minor table resizing adjustments which you'll notice as soon as you click the link below, I'm one bug away from buyin it and stickin it on my live site. The bug I'm referring to is the Shrinking Horizontal SubMenu. I saw it mentioned here previously once but no live evidence was given.

Here's the link to the menu:
http://www.naturesarsenal.com/menu1.aspx <--(edit) this no longer works
Move your cursor back and forth from the submenu to the main menu on "Support".

None of the other submenus do this. A couple of the others did do it when I was working on it, but currently it's just the one submenu and I can't get it to go away. Notice the code for the "Health Info" submenu is virtually identical and yet it does not shrink.

Also this problem happens in IE, but not in Firefox. Didn't test others.

My menu_data.js file is pasted below.

Thanks for any help you can give.
-Tom

Code:
fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;
var sub1TopOffset = 5;

with(naStyle=new mm_style()){
bordercolor="#99CC99";
borderstyle="solid";
borderwidth=0;
fontfamily="Trebuchet MS";
fontsize="14px";
fontstyle="normal";
fontweight="bold";
offcolor="#009900";
oncolor="#FF9933";
separatorimage="sep_na.gif";
separatorsize=12;
padding=3;
align="center";
margin=0;
}

with(sub1Style=new mm_style()){
bordercolor="#99CC99";
borderstyle="solid";
borderwidth=0;
fontfamily="Trebuchet MS";
fontsize="12px";
fontstyle="normal";
fontweight="bold";
offcolor="#009900";
oncolor="#FF9933";
padding=3;
align="center";
separatorimage="sep_na.gif";
separatorsize=12;
}

with(sub2Style=new mm_style()){
bordercolor="#99CC99"
borderstyle="solid";
borderwidth=1;
fontfamily="Trebuchet MS";
fontsize="12px";
fontstyle="normal";
fontweight="bold";
offcolor="#009900";
offbgcolor="#E8FFE8";
oncolor="#FF9933";
padding=3;
align="center";
}

with(milonic=new menuname("Products")){
style=sub1Style;
orientation="horizontal";
itemwidth=119;
itemheight=31;
top = "offset=" + sub1TopOffset;
aI("showmenu=a2z;itemwidth=89;bgimage=left_na125.gif;text=A to Z List;url=http://www.naturesarsenal.com/products/a2z.aspx;")
aI("showmenu=categories;itemwidth=98;bgimage=mid_na125.gif;text=by Category;url=http://www.naturesarsenal.com/products/categories.aspx;")
aI("showmenu=systems;itemwidth=119;bgimage=right_na125.gif;text=by Body System;url=http://www.naturesarsenal.com/products/bodysystem.aspx;")
}

with(milonic=new menuname("a2z")){
style=sub2Style;
orientation="horizontal";
itemwidth=20;
itemheight=31;
top = "offset=" + sub1TopOffset;
aI("text=0-9;url=http://www.naturesarsenal.com/products/a2z.aspx#0-9;")
aI("text=A;url=http://www.naturesarsenal.com/products/a2z.aspx#A;")
aI("text=B;url=http://www.naturesarsenal.com/products/a2z.aspx#B;")
aI("text=C;url=http://www.naturesarsenal.com/products/a2z.aspx#C;")
aI("text=D;url=http://www.naturesarsenal.com/products/a2z.aspx#D;")
aI("text=E;url=http://www.naturesarsenal.com/products/a2z.aspx#E;")
aI("text=F;url=http://www.naturesarsenal.com/products/a2z.aspx#F;")
aI("text=G;url=http://www.naturesarsenal.com/products/a2z.aspx#G;")
aI("text=H;url=http://www.naturesarsenal.com/products/a2z.aspx#H;")
aI("text=I;url=http://www.naturesarsenal.com/products/a2z.aspx#I;")
aI("text=J;url=http://www.naturesarsenal.com/products/a2z.aspx#J;")
aI("text=K;url=http://www.naturesarsenal.com/products/a2z.aspx#K;")
aI("text=L;url=http://www.naturesarsenal.com/products/a2z.aspx#L;")
aI("text=M;url=http://www.naturesarsenal.com/products/a2z.aspx#M;")
aI("text=N;url=http://www.naturesarsenal.com/products/a2z.aspx#N;")
aI("text=O;url=http://www.naturesarsenal.com/products/a2z.aspx#O;")
aI("text=P;url=http://www.naturesarsenal.com/products/a2z.aspx#P;")
aI("text=R;url=http://www.naturesarsenal.com/products/a2z.aspx#R;")
aI("text=S;url=http://www.naturesarsenal.com/products/a2z.aspx#S;")
aI("text=T;url=http://www.naturesarsenal.com/products/a2z.aspx#T;")
aI("text=U;url=http://www.naturesarsenal.com/products/a2z.aspx#U;")
aI("text=V;url=http://www.naturesarsenal.com/products/a2z.aspx#V;")
aI("text=W;url=http://www.naturesarsenal.com/products/a2z.aspx#W;")
aI("text=X;url=http://www.naturesarsenal.com/products/a2z.aspx#X;")
aI("text=Y;url=http://www.naturesarsenal.com/products/a2z.aspx#Y;")
aI("text=Z;url=http://www.naturesarsenal.com/products/a2z.aspx#Z;")
}

with(milonic=new menuname("categories")){
overflow="scroll";
style=sub2Style;
orientation="vertical";
top = "offset=" + sub1TopOffset;
aI("text=Allergy;url=http://www.naturesarsenal.com/products/categories.aspx#Allergy;")
aI("text=Amino Acids;url=http://www.naturesarsenal.com/products/categories.aspx#Amino Acids;")
aI("text=Aromatherapy;url=http://www.naturesarsenal.com/products/categories.aspx#Aromatherapy;")
aI("text=Ayurvedic Herbs;url=http://www.naturesarsenal.com/products/categories.aspx#Ayurvedic Herbs;")
aI("text=Bulk Herbs;url=http://www.naturesarsenal.com/products/categories.aspx#Bulk Herbs;")
aI("text=Children's Products;url=http://www.naturesarsenal.com/products/categories.aspx#Children's Products;")
aI("text=Chinese Herbs;url=http://www.naturesarsenal.com/products/categories.aspx#Chinese Herbs;")
aI("text=Cleansing;url=http://www.naturesarsenal.com/products/categories.aspx#Cleansing;")
aI("text=Drinks;url=http://www.naturesarsenal.com/products/categories.aspx#Drinks;")
aI("text=Enzymes;url=http://www.naturesarsenal.com/products/categories.aspx#Enzymes;")
aI("text=Essential Oils;url=http://www.naturesarsenal.com/products/categories.aspx#Essential Oils;")
aI("text=Hair;url=http://www.naturesarsenal.com/products/categories.aspx#Hair;")
aI("text=Herbal Formulas;url=http://www.naturesarsenal.com/products/categories.aspx#Herbal Formulas;")
aI("text=Home Products;url=http://www.naturesarsenal.com/products/categories.aspx#Home Products;")
aI("text=Homeopathic Remedies;url=http://www.naturesarsenal.com/products/categories.aspx#Homeopathic Remedies;")
aI("text=Homeopathic-Children's;url=http://www.naturesarsenal.com/products/categories.aspx#Homeopathic - Children's;")
aI("text=Liquid Herbs;url=http://www.naturesarsenal.com/products/categories.aspx#Liquid Herbs;")
aI("text=Men's Health;url=http://www.naturesarsenal.com/products/categories.aspx#Men's Health;")
aI("text=Mental Stress/Well-Being;url=http://www.naturesarsenal.com/products/categories.aspx#Mental Stress/Well-Being;")
aI("text=Personal Care;url=http://www.naturesarsenal.com/products/categories.aspx#Personal Care;")
aI("text=pH Maintenance;url=http://www.naturesarsenal.com/products/categories.aspx#ph Maintenance;")
aI("text=Pre-Packaged Programs;url=http://www.naturesarsenal.com/products/categories.aspx#Pre-Packaged Programs;")
aI("text=Probiotics;url=http://www.naturesarsenal.com/products/categories.aspx#Probiotics;")
aI("text=Single Herbs;url=http://www.naturesarsenal.com/products/categories.aspx#Single Herbs;")
aI("text=Skin;url=http://www.naturesarsenal.com/products/categories.aspx#Skin;")
aI("text=Vital Nutrition;url=http://www.naturesarsenal.com/products/categories.aspx#Vital Nutrition;")
aI("text=Vitamins, Minerals & Phytonutrients;url=http://www.naturesarsenal.com/products/categories.aspx#Vitamins, Minerals & Phytonutrients;")
aI("text=Weight Management;url=http://www.naturesarsenal.com/products/categories.aspx#Weight Management;")
aI("text=Women's Health;url=http://www.naturesarsenal.com/products/categories.aspx#Women's Health;")
}

with(milonic=new menuname("systems")){
overflow="scroll";
style=sub2Style;
itemwidth=119;
orientation="vertical";
top = "offset=" + sub1TopOffset;
aI("text=Circulatory;url=http://www.naturesarsenal.com/products/bodysystem.aspx#circulatory")
aI("text=Digestive;url=http://www.naturesarsenal.com/products/bodysystem.aspx#digestive;")
aI("text=Glandular;url=http://www.naturesarsenal.com/products/bodysystem.aspx#glandular;")
aI("text=Immune;url=http://www.naturesarsenal.com/products/bodysystem.aspx#immune;")
aI("text=Intestinal;url=http://www.naturesarsenal.com/products/bodysystem.aspx#intestinal;")
aI("text=Nervous;url=http://www.naturesarsenal.com/products/bodysystem.aspx#nervous;")
aI("text=Respiratory;url=http://www.naturesarsenal.com/products/bodysystem.aspx#respiratory;")
aI("text=Structural;url=http://www.naturesarsenal.com/products/bodysystem.aspx#structural;")
aI("text=Urinary;url=http://www.naturesarsenal.com/products/cbodysystem.aspx#urinary;")
}

with(milonic=new menuname("Info")){
style=sub1Style;
orientation="horizontal";
//itemwidth=119;
itemheight=31;
top = "offset=" + sub1TopOffset;
aI("itemwidth=83;bgimage=left_na125.gif;text=Articles;url=http://www.naturesarsenal.com/info.aspx#articles;");
aI("itemwidth=119;bgimage=mid_na125.gif;text=Product Quality;url=http://www.naturesarsenal.com/info/quality.aspx;");
aI("itemwidth=119;bgimage=right_na125.gif;text=Product Testing;url=http://www.naturesarsenal.com//info/tests.aspx;");
}

with(milonic=new menuname("Support")){
style=sub1Style;
orientation="horizontal";
//itemwidth=119;
itemheight=31;
top = "offset=" + sub1TopOffset;
aI("itemwidth=90;bgimage=left_na125.gif;text=About Us;url=http://www.naturesarsenal.com/support/aboutus.aspx;");
aI("itemwidth=99;bgimage=mid_na125.gif;text=Contact Us;url=http://www.naturesarsenal.com/support/contactus.aspx;");
aI("itemwidth=62;bgimage=mid_na125.gif;text=FAQ;url=http://www.naturesarsenal.com/support/faq.aspx;");
aI("itemwidth=144;bgimage=mid_na125.gif;text=Product Guarantee;url=http://www.naturesarsenal.com/support/guarantee.aspx;");
aI("itemwidth=141;bgimage=mid_na125.gif;text=Ordering/Shipping;url=http://www.naturesarsenal.com/support/orderinfo.aspx;");
aI("itemwidth=107;bgimage=right_na125.gif;text=Membership;url=http://www.naturesarsenal.com/support/memberinfo.aspx;");
}

drawMenus();


Poster: Bowfonz
Dated: Saturday February 11 2006 - 21:33:34 GMT

Well, it seems that it may have had something to do with IE not liking that menu up against the right edge. I stuck a -12px offset on that submenu and viola!, it stopped shrinking.

Interestingly, the more I increased that negative offset, the smaller the amount of the shrinking, -12 was the magic number that stopped it altogether.

I had tried adding the "showmenu=" parameter as suggested in another post, but that didn't affect it at all.

Anyway, for my purposes the problem is solved but maybe this will help with improving future versions.


Poster: Migru
Dated: Sunday February 12 2006 - 16:21:18 GMT

Hi

I´m sorry that I had a look on that incredible "evidence" a little late.

menuwidth=623;

would have settled that magic issue....improving the present and all future applications in this regard.

Syntax:
About seventy times the ";" is missing in the menu_data.js and itemwidth are set for the menu "Products" together with individual settings.
Actually I don´t know which one overrules which. But if global set, individual ones should not be set and vice versa.

Michael


Poster: Bowfonz
Dated: Sunday February 12 2006 - 17:13:34 GMT

Thanks. I can't believe I missed all those semi-colons.
I bought my license and put the menu up live yesterday.
http://www.naturesarsenal.com
A successful implementation of the horizontal menu, I'm very happy with the way it turned out.

What's the deal with menuwidth? The sheet of menu properties I have has it listed with no explanation. Where does it go and what does it affect?

What I found with itemwidth is that specifying it for a specific "aI" item overrides the one for the whole submenu. Which makes sense. e.g. If everything is about the same except one small item like "FAQ".

What IS weird about itemwidth (not to get off on another subject) is that I was toying around with divides to make a 3 column list under my categories menu. And it seemed like sometimes itemwidth was specifying the width for each menu item and sometimes it was the specifying the width of all 3 columns. I could never get that to look right as I had too many lengthy menu items, so I abondoned it.

Thanks again,
-Tom


Poster: Migru
Dated: Sunday February 12 2006 - 17:34:21 GMT

Hi

menuwidth extends the "total" of itemwidth settings;

a) you can set it to a specific number of pixels, it will create an extension in heigth and width of the offcolor.

b) you can set it to 100% for instance.

See sample
http://www.milonic.com/menusample26.php

or, when it is placed in a table cell for instance, will fill the table cell from border to border.

Michael


PS: itemwidth in columns

No, itemwidth will not specify the total of items in one row. Itemwidth is a property of the item, and when set in the menu (not individual) always refers to all items. I´m using it for instance
- with 30 items in 5 columns
- with 62 items in 2 columns

and there were no problems at all

Michael


Poster: John
Dated: Monday February 13 2006 - 15:33:39 GMT

Bowfonz wrote:
What's the deal with menuwidth? The sheet of menu properties I have has it listed with no explanation. Where does it go and what does it affect?

You actually answered your own question; i.e., "...sheet of menu properties...". Therefore, it goes in your "with(milonic=new menuname("a2z")){..." stuff. Also, a Search will bring up a lot of additional info on using it.

©1998-2012 Milonic Solutions Ltd. UK Registered Company #4406835
Privacy Policy | License Agreement | Contact Us | Tech Support