Centering dropdown in relation to parent

[suzyb]

My dropdown menus can have variable width depending on the length of their contents. I would like them to be centered in the parent item, sticking out at either side if the drop down is wider than the parent.

I believe I would have to set

subMenusSubOffsetX

but as the width of the dropdown is variable how or where would I do so.

[suzyb]

I was wrong about the offset used, it’s mainMenuSubOffsetX that does the correct thing.

I managed to come up with a solution that seems to work. The following code I added after the ‘hide.smapi’ binding in the jquery.smartmenus.bootstrap.js file.

'beforeshow.smapi': function (e, menu) {
	var $menu = $(menu), obj = $(this).data('smartmenus');

	obj.opts.mainMenuSubOffsetX = 0;    // reset so it isn't held over between different dropdowns

	var width = obj.getWidth($menu.dataSM('parent-a'));
	var subWidth = obj.getWidth($menu);

	if (subWidth > width) {
		obj.opts.mainMenuSubOffsetX = -Math.abs((subWidth - width) / 2) + 'px';
	}
}

[admin]

You will need some additional custom code – just include it after jQuery on your page:

// SmartMenus jQuery - Center first level sub menus to parent item
$(function() {
	$('#main-menu').bind('show.smapi', function(e, menu) {
		var $menu = $(menu);
		// check just first-level subs
		if ($menu.dataSM('level') == 2) {
			var obj = $(this).data('smartmenus'),
				$item = $menu.dataSM('parent-a'),
				itemW = obj.getWidth($item),
				menuW = obj.getWidth($menu),
				menuX = (itemW - menuW) / 2;
			// keep supporting keepInViewport
			if (obj.opts.keepInViewport) {
				var $win = $(window),
					winX = $win.scrollLeft(),
					winW = obj.getViewportWidth(),
					itemX = $item.offset().left,
					absX = itemX + menuX;
				if (absX < winX) {
					menuX += winX - absX;
				} else if (absX + menuW > winX + winW) {
					menuX += winX + winW - menuW - absX;
				}
			}
			$menu.css('margin-left', menuX);
			if ($menu.dataSM('ie-shim')) {
				$menu.dataSM('ie-shim').css('margin-left', menuX);
			}
		}
	});
});

Assuming your root UL element has id="main-menu" this should work no matter whether you are using the script with/without the Bootstrap addon.

[admin]

OK, you beat me to it. 🙂 What I posted is a bit more generic approach but glad to see you’ve figured out your own solution too. 🙂

[suzyb]

Thanks for posting your code. My solution doesn’t take into account any options we don’t have set so I’m sure yours will be very useful in the future.

[Author]

Posts