2nd level within parent container borders

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1326
    rowild
    Participant

    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

    #1590
    admin
    Keymaster

    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!

Viewing 2 posts - 1 through 2 (of 2 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?