Evidence of the Incredible Shrinking Menu

Bowfonz · Post by **Bowfonz** » Sat Feb 11, 2006 9:11 pm

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: Select all

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();

Bowfonz · Post by **Bowfonz** » Sat Feb 11, 2006 10:33 pm

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.

Migru · Post by **Migru** » Sun Feb 12, 2006 5:21 pm

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

Bowfonz · Post by **Bowfonz** » Sun Feb 12, 2006 6:13 pm

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

Migru · Post by **Migru** » Sun Feb 12, 2006 6:34 pm

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

Post by **John** » Mon Feb 13, 2006 4:33 pm

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.