Centering dropdown in relation to parent

Home Forums Older releases 1.0.x + Bootstrap addon Centering dropdown in relation to parent

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #3382

    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


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


    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';

    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.


    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. 🙂


    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.


You will be emailed a link to set your password.


Lost password?