How to make superfish menu open backward when there is not enough space?

Question

How to make superfish menu open backward? I embedded a supperfish menu to my facebook application on fanpage, there is not enough space for the menu expand fully because it runs in iframe. How can I solve this issue by using superfis, or any other jquery menu plugin are also fine.

Thank you.

The current situation

The expected result

@Updated: This is an user-defined menu, and it has no limit of menu level.

Answer 1

I know this question is very old but just for the reference, this is how I fixed the said issue

var windowWidth;
$(document).ready(function (){
        windowWidth= $(window).width();
        $( window ).resize(function() {
            windowWidth = $(window).width();
        });

        $('.top-nav').superfish({
            onBeforeShow : function (){                 
                if(!this.is('.top-nav>li>ul')){
                    var subMenuWidth = $(this).width();
                    var parentLi = $(this).parent();                    
                    var parentWidth = parentLi.width();
                    var subMenuRight = parentLi.offset().left + parentWidth + subMenuWidth;
                    if(subMenuRight > windowWidth){
                        $(this).css({'left': 'auto', 'right': parentWidth+'px'});
                    } else {
                        $(this).css({'left': '', 'right': ''});
                    }
                }
            }
        });
 });

Answer 2

I have written this script to fix. Now menu opens on left instead of right if there is no enough room.

// 2/3/4th level menu  offscreen fix        
var wapoMainWindowWidth = $(window).width();

$('.sf-menu ul li').mouseover(function(){

    // checks if third level menu exist         
    var subMenuExist = $(this).find('.sub-menu').length;            
    if( subMenuExist > 0){
        var subMenuWidth = $(this).find('.sub-menu').width();
        var subMenuOffset = $(this).find('.sub-menu').parent().offset().left + subMenuWidth;

        // if sub menu is off screen, give new position
        if((subMenuOffset + subMenuWidth) > wapoMainWindowWidth){                  
            var newSubMenuPosition = subMenuWidth + 3;
            $(this).find('.sub-menu').css({
                left: -newSubMenuPosition,
                top: '0',
            });
        }
    }
 });

Answer 3

ul ul ul ul ul { right: 100%; }

This way, all subnavigations after the 4. submenu will be positioned to the left side.

The next step is, to reset this property after a few UL's like this:

ul ul ul ul ul ul ul ul { right: auto; left: 100%; }

Try to play with it.

I never develop such much nested navigation, but this snippet could be useful in other situations.

Hope this helps.