Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
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:23
Constrain height of sub menu
Poster: nif
Dated: Monday January 28 2008 - 8:57:56 GMT
hi there,
i need to constrain the height of a submenu and then allow it to scroll... is this possible with milonic? if so, how? i have tried setting height="150px" in the style declaration, but no luck.
thanks a mil',
nikki
Re: Constrain height of sub menu
Poster: Ruth
Dated: Monday January 28 2008 - 19:34:35 GMT
Hi,
You would set menuheight=; and itemheight=; and overflow="scroll"; in the menu. If that doesn't work you'll need to provide the page so we can see why it's not working.
Ruth
Re: Constrain height of sub menu
Poster: nif
Dated: Tuesday January 29 2008 - 8:28:57 GMT
hi there,
thanks for that. the scrollbars are showing, but i only want the vertical one to show and both horizontal and vertical are showing... i have tried setting menuwidth to the same value and a higher value than the css style set against each menuitem. i have also tried removing the css width and then also removing menuwidth, but to no avail... the scrollbar still displays. and none of the text even vaguely reaches the width specified.
any idea of how to force the horizontal scrollbar to not display?
thanks a mil',
nikki
Re: Constrain height of sub menu
Poster: John
Dated: Tuesday January 29 2008 - 12:42:31 GMT
Please provide a URL so we can see what's happening.
Re: Constrain height of sub menu
Poster: nif
Dated: Tuesday January 29 2008 - 13:44:19 GMT
hi john,
for client privacy reasons, i cannot post a link at this point, but attached is a screen grab of the issue.
Attachment:
milonic_nav_issue.gif
thanks a mil',
nikki
Re: Constrain height of sub menu
Poster: John
Dated: Tuesday January 29 2008 - 13:46:26 GMT
Hi,
We really need to see the code. It is permissible to post it here.
Re: Constrain height of sub menu
Poster: nif
Dated: Tuesday January 29 2008 - 13:57:04 GMT
sure... check it out below:
menu_data.js:
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=0;
_subOffsetLeft=1;
subTopOffset=10;
with(menuStyle=new mm_style()){
overfilter="Fade(duration=0.2);";
offclass="mainNavItem";
onclass="mainNavItem mainNavItemOver";
separatorsize=1;
separatorheight=8;
separatorpadding=5;
separatoralign="center";
separatorcolor="#036cbb";
}
with(submenuStyle=new mm_style()){
overfilter="Fade(duration=0.5);";
offclass="subNavItem";
onclass="subNavItem subNavItemOver";
separatorsize=1;
separatorheight=0;
separatorpadding=0;
separatorcolor="#036cbb";
height="50px";
}
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=0;
_subOffsetLeft=1;
subTopOffset=10;
with(menuStyle=new mm_style()){
overfilter="Fade(duration=0.2);";
offclass="mainNavItem";
onclass="mainNavItem mainNavItemOver";
separatorsize=1;
separatorheight=8;
separatorpadding=5;
separatoralign="center";
separatorcolor="#036cbb";
}
with(submenuStyle=new mm_style()){
overfilter="Fade(duration=0.5);";
offclass="subNavItem";
onclass="subNavItem subNavItemOver";
separatorsize=1;
separatorheight=0;
separatorpadding=0;
separatorcolor="#036cbb";
height="50px";
}
main_nav.js (the code below is the sub nav you are seeing in the screen grab - there is obviously more for the main nav etc.):
Code:
with(milonic=new menuname("fashion_and_shoes")){
style=subSubmenuStyle;
menuheight = 250;
//menuwidth = 250;
overflow = "scroll";
if (sub_sub_item == "ackermans") {
aI("text=Ackermans;url=ackermans.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Ackermans;url=ackermans.html;");
}
if (sub_sub_item == "bata_shoes") {
aI("text=Bata Shoes;url=bata_shoes.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Bata Shoes;url=bata_shoes.html;");
}
if (sub_item == "contempo") {
aI("text=Contempo;url=contempo.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Contempo;url=contempo.html;");
}
if (sub_item == "donna_claire") {
aI("text=Donna Claire;url=donna_claire.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Donna Claire;url=donna_claire.html;");
}
if (sub_item == "foschini") {
aI("text=Foschini;url=foschini.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Foschini;url=foschini.html;");
}
if (sub_item == "hang_ten") {
aI("text=Hang Ten;url=hang_ten.html;offclass=subSubNavItem subSubNavItemOverr;");
} else {
aI("text=Hang Ten;url=hang_ten.html;");
}
if (sub_item == "identity") {
aI("text=Identity;url=identity.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Identity;url=identity.html;");
}
if (sub_item == "jay_jays") {
aI("text=JayJays;url=jay_jays.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=JayJays;url=jay_jays.html;");
}
if (sub_item == "jet_stores") {
aI("text=Jet stores;url=jet_stores.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Jet stores;url=jet_stores.html;");
}
if (sub_item == "legit") {
aI("text=Legit;url=legit.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Legit;url=legit.html;");
}
if (sub_item == "markhams") {
aI("text=Markhams;url=markhams.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Markham;url=markhams.html;");
}
if (sub_item == "miladys") {
aI("text=Milady’s;url=miladys.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Milady’s;url=miladys.html;");
}
if (sub_item == "mr_price_heroes_weekend") {
aI("text=Mr Price/Heroes Weekend;url=mr_price_heroes_weekend.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Mr Price/Heroes Weekend;url=mr_price_heroes_weekend.html;");
}
if (sub_item == "origin") {
aI("text=Origin;url=origin.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Origin;url=origin.html;");
}
if (sub_item == "papelli_shoes") {
aI("text=Papelli Shoes;url=papelli_shoes.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Papelli Shoes;url=papelli_shoes.html;");
}
if (sub_item == "pier_pressure") {
aI("text=Pier Pressure;url=pier_pressure.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Pier Pressure;url=pier_pressure.html;");
}
if (sub_item == "pep_stores") {
aI("text=Pep Stores;url=pep_stores.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Pep Stores;url=pep_stores.html;");
}
if (sub_item == "rage_shoes") {
aI("text=Rage Shoes;url=rage_shoes.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Rage Shoes;url=rage_shoes.html;");
}
if (sub_item == "sidewalk_surfer") {
aI("text=Sidewalk Surfer;url=sidewalk_surfer.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Sidewalk Surfer;url=sidewalk_surfer.html;");
}
if (sub_item == "silk_and_lace") {
aI("text=Silk & Lace;url=silk_and_lace.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Silk & Lace;url=silk_and_lace.html;");
}
if (sub_item == "step_ahead") {
aI("text=Step Ahead;url=step_ahead.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Step Ahead;url=step_ahead.html;");
}
if (sub_item == "totalsports") {
aI("text=Totalsports;url=totalsports.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Totalsports;url=totalsports.html;");
}
if (sub_item == "trappers_trading") {
aI("text=Trappers Trading;url=trappers_trading.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Trappers Trading;url=trappers_trading.html;");
}
if (sub_item == "truworths") {
aI("text=Truworths;url=truworths.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Truworths;url=truworths.html;");
}
if (sub_item == "vibes") {
aI("text=Vibes;url=vibes.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Vibes;url=vibes.html;");
}
if (sub_item == "xclusive_ties") {
aI("text=Xclusive Ties;url=xclusive_ties.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Xclusive Ties;url=xclusive_ties.html;");
}
}
style=subSubmenuStyle;
menuheight = 250;
//menuwidth = 250;
overflow = "scroll";
if (sub_sub_item == "ackermans") {
aI("text=Ackermans;url=ackermans.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Ackermans;url=ackermans.html;");
}
if (sub_sub_item == "bata_shoes") {
aI("text=Bata Shoes;url=bata_shoes.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Bata Shoes;url=bata_shoes.html;");
}
if (sub_item == "contempo") {
aI("text=Contempo;url=contempo.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Contempo;url=contempo.html;");
}
if (sub_item == "donna_claire") {
aI("text=Donna Claire;url=donna_claire.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Donna Claire;url=donna_claire.html;");
}
if (sub_item == "foschini") {
aI("text=Foschini;url=foschini.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Foschini;url=foschini.html;");
}
if (sub_item == "hang_ten") {
aI("text=Hang Ten;url=hang_ten.html;offclass=subSubNavItem subSubNavItemOverr;");
} else {
aI("text=Hang Ten;url=hang_ten.html;");
}
if (sub_item == "identity") {
aI("text=Identity;url=identity.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Identity;url=identity.html;");
}
if (sub_item == "jay_jays") {
aI("text=JayJays;url=jay_jays.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=JayJays;url=jay_jays.html;");
}
if (sub_item == "jet_stores") {
aI("text=Jet stores;url=jet_stores.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Jet stores;url=jet_stores.html;");
}
if (sub_item == "legit") {
aI("text=Legit;url=legit.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Legit;url=legit.html;");
}
if (sub_item == "markhams") {
aI("text=Markhams;url=markhams.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Markham;url=markhams.html;");
}
if (sub_item == "miladys") {
aI("text=Milady’s;url=miladys.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Milady’s;url=miladys.html;");
}
if (sub_item == "mr_price_heroes_weekend") {
aI("text=Mr Price/Heroes Weekend;url=mr_price_heroes_weekend.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Mr Price/Heroes Weekend;url=mr_price_heroes_weekend.html;");
}
if (sub_item == "origin") {
aI("text=Origin;url=origin.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Origin;url=origin.html;");
}
if (sub_item == "papelli_shoes") {
aI("text=Papelli Shoes;url=papelli_shoes.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Papelli Shoes;url=papelli_shoes.html;");
}
if (sub_item == "pier_pressure") {
aI("text=Pier Pressure;url=pier_pressure.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Pier Pressure;url=pier_pressure.html;");
}
if (sub_item == "pep_stores") {
aI("text=Pep Stores;url=pep_stores.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Pep Stores;url=pep_stores.html;");
}
if (sub_item == "rage_shoes") {
aI("text=Rage Shoes;url=rage_shoes.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Rage Shoes;url=rage_shoes.html;");
}
if (sub_item == "sidewalk_surfer") {
aI("text=Sidewalk Surfer;url=sidewalk_surfer.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Sidewalk Surfer;url=sidewalk_surfer.html;");
}
if (sub_item == "silk_and_lace") {
aI("text=Silk & Lace;url=silk_and_lace.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Silk & Lace;url=silk_and_lace.html;");
}
if (sub_item == "step_ahead") {
aI("text=Step Ahead;url=step_ahead.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Step Ahead;url=step_ahead.html;");
}
if (sub_item == "totalsports") {
aI("text=Totalsports;url=totalsports.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Totalsports;url=totalsports.html;");
}
if (sub_item == "trappers_trading") {
aI("text=Trappers Trading;url=trappers_trading.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Trappers Trading;url=trappers_trading.html;");
}
if (sub_item == "truworths") {
aI("text=Truworths;url=truworths.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Truworths;url=truworths.html;");
}
if (sub_item == "vibes") {
aI("text=Vibes;url=vibes.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Vibes;url=vibes.html;");
}
if (sub_item == "xclusive_ties") {
aI("text=Xclusive Ties;url=xclusive_ties.html;offclass=subSubNavItem subSubNavItemOver;");
} else {
aI("text=Xclusive Ties;url=xclusive_ties.html;");
}
}
css styles:
Code:
.subSubNavItem {
width: 200px;
font-family: Arial, Verdana, Tahoma;
font-size: 12px;
color:#807a6c;
background-color:#e0d1aa;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
text-decoration: none;
}
.subSubNavItemOver {
background-color:#efe7d0;
}
width: 200px;
font-family: Arial, Verdana, Tahoma;
font-size: 12px;
color:#807a6c;
background-color:#e0d1aa;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
text-decoration: none;
}
.subSubNavItemOver {
background-color:#efe7d0;
}
let me know if you need any other stuff.
thanks,
nikki
Re: Constrain height of sub menu
Poster: Ruth
Dated: Tuesday January 29 2008 - 17:02:00 GMT
Hi,
I don't know what the height=50; is in the subMenuStyle area. There is no plain height code unless that has been added in recent days. You have itemheight, imageheight, separatorheight etc.
Try removing anything to do with width, except menuwidth. If it still does that, then you'll have to check your css to see if you have anything that would cause that. I realize you're using css for the menu, but sometimes, depending on how the menu is put on the page, in a table, etc, other css can cause a problem in some browsers, generic css usually, table, div span, margin padding codes. Since we do not have the page, I can only tell you what I do, which is to start at the first css stuff, like Body, if it has padding and margins, remove one look at the page see if the menu was affected, if not put it back and remove the other. Then I go through each css thingee mostly looking at margin and padding. That's all we can suggest since we can't have the page. Also, make sure you have the newest version of the menu, that's the other thing we can't see without the page.
Ruth