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.

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
  • #1326


    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


    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.


Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘0.9.x’ is closed to new topics and replies.