2nd level within parent container borders

[rowild]

Hi,

this is my first post here! A very friendly and supportive community from what I experience when reading through the posts!

I’d like to discuss a problem of mine that I cannot solve.
The Smartmenu is placed in a 1200px container (with 10 menu items, meaning it is a bit crowded), its submenues are not vertical, but horizontal. (The 3rd level is vertikal again)
That works quite well for all those menues on the further left side, but those on the right side tend to “jump out” of the borders of the parent container. I know there is a check against the viewport, but not against a parent container…

My question is:
1. Is it possible to check against the parent container?
2. Is it maybe even possible to make the 2nd level (which is horizontal) 100% wide and center its menues?

Thanks for your feedback!
Greetings from Vienna! Robert

[admin]

Hi Robert,

For 1) you could make use of the show API event, for example, like this:

var $mainMenu = $('#main-menu').bind('show.smapi', function(e, menu) {
	var $menu = $(menu),
		$container = $('#containerID');
	// check just first-level subs
	if ($container.length && $menu.dataSM('level') == 2) {
		var obj = $mainMenu.data('smartmenus'),
			containerX = $container.offset().left,
			containerW = obj.getWidth($container),
			menuX = $menu.offset().left,
			menuW = obj.getWidth($menu),
			$item = $menu.dataSM('parent-a'),
			itemX = $item.offset().left;
		// right align menu box in container if it overflows
		if (menuX + menuW > containerX + containerW) {
			var newX = containerX + containerW - menuW - itemX;
			$menu.css('margin-left', newX);
			if ($menu.dataSM('ie-shim')) {
				$menu.dataSM('ie-shim').css('margin-left', newX);
			}
		}
	}
});

Just configure this line $container = $('#containerID') with your container.

As for 2), it should be possible (and then you probably wouldn’t need 1) at all) but I will need to look at your exact code to be able to tweak it properly since you are obviously using some additional CSS to make the first-level subs horizontal. So please post some live test case if possible.

Thanks!

[Author]

Posts