Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

Re: 2nd level within parent container borders

Home Forums Older releases 0.9.x 2nd level within parent container borders Re: 2nd level within parent container borders


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 = $'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.