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
    Posts
  • #3382
    suzyb
    Participant

    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.

    #3384
    suzyb
    Participant

    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';
    	}
    }
    #3385
    admin
    Keymaster

    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.

    #3386
    admin
    Keymaster

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

    #3387
    suzyb
    Participant

    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.

Register

You will be emailed a link to set your password.

Login

Lost password?