Constrain height of sub menu

[nif]

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

[Ruth]

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

[nif]

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

[John]

Please provide a URL so we can see what's happening.

[nif]

hi john,

for client privacy reasons, i cannot post a link at this point, but attached is a screen grab of the issue.

milonic_nav_issue.gif (15.89 KiB) Viewed 4920 times

thanks a mil',
nikki

[John]

Hi,

We really need to see the code. It is permissible to post it here.

[nif]

sure... check it out below:

menu_data.js:

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

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;");
	}
}

css styles:

Code: Select all

.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;
}

let me know if you need any other stuff.

thanks,
nikki

[Ruth]

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