Make dropdown menu expand left rather than right if screen edge.

[dbmathis]

Hello Folks,

I installed a template on the following site and did not actually write the javascript dropdown menu seen at the top of http://sthomaslc.com/

The problem is that if parent list items Ministries and Parish Leadership have enough children, they expand out right off of the screen of low resolution setups.

I am totally new to javascipt programming so excuse my ignorance when I ask how to make the children items to expand out left instead of right if it's detected that the menu has hit the right side of the browser window.

Best Regards

David

[Brett H]

I too am trying to have the dropdown menu show to the left not right.
Any help would be appreciated.
Thanks,
Brett

[DrDOS]

For dbmathis, look in the horiz_menu.css file, go down till you find these three items.

#horiz-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	float:left;	z-index:50 !important;
}

#horiz-menu li {
	display: block;
	float: left;
	margin: 0 1px 0 0;
	padding: 0;	z-index:50 !important;
}

#horiz-menu a,
#horiz-menu li.active a {
	white-space: nowrap;
	display: block;
	float: left;
	height: 30px;
	line-height: 30px;
	padding: 0 17px;
	font-weight:bold;
	font-size: 100%;
	overflow: hidden; z-index:50 !important;
}

Where it says float:left, change that to float:right, and report back please.

[SB65]

The positioning of the flyout menu on :hover is coming from this css (in moomenu.css):

.menutop li li:hover ul, .menutop li li.sfHover ul, 
.menutop li li li:hover ul, .menutop li li li.sfHover ul, 
.menutop li li li li:hover ul, .menutop li li li li.sfHover ul{
left:177px; top:0px; z-index:50;
}

This is placing the left margin of the absolutely positioned flyout menu 177px from the top left corner of its parent - which is effectively immediately to the right of it. In order for the flyout to appear on the other side the left setting needs to be -177px.

To target only the "Ministries" menu for this, and let the other menus behave as now, you could assign a class (let's say 'leftmenu') to the Ministries li tag, and then use something like:

.menutop li.leftmenu li:hover ul, .menutop li.leftmenu li.sfHover ul, 
.menutop li.leftmenu li li:hover ul, .menutop li.leftmenu li li.sfHover ul, 
.menutop li.leftmenu li li li:hover ul, .menutop li.leftmenu li li li.sfHover ul{
left:-177px; top:0px; z-index:50;
}

This should probably be in the css forum.

[dbmathis]

SB65 Thanks.

I could not use your example verbatim because the Joomla! menu system is pretty inflexible, but i was able to use the classes that get assigned to the parent list items in place of leftmenu and it worked like a charm. Thanks for you help, was perfect.

Best regards

David

[ckdesign]

I think I have the same question as dbmathis, and for give me for assuming but I don't think the answers given here are what we are looking for. I have the same issue with a JavaScript dropdown menu and I have seen (can't remember the location of the sites unfortunately) dropdowns that appear change direction when they hit the edge of a specified container div. Is there a such thing as edge detection or hit tests in jQuery or javascript or do people just make new classes with float:right for the menus that are in danger of going off screen?

I'm hoping there is a way to do this with javascript because doing this with CSS would be very inconvenient with code that is dynamicly generated through a CMS.