如果没有足够的空间，如何让superfish菜单向后打开？

Question

如何让superfish菜单向后打开？我在fanpage页面上将我的facebook应用程序嵌入了一个supperfish菜单，没有足够的空间让菜单完全展开，因为它在iframe中运行。如何通过使用superfis或任何其他jquery菜单插件解决此问题也很好。

谢谢。

目前的情况

预期结果

@Updated：这是一个用户定义的菜单，没有菜单级限制。

Answer 1

我知道这个问题很老但仅供参考，这就是我修复上述问题的方法

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

我已经编写了这个脚本来修复。如果没有足够的空间，现在菜单会在左侧而不是右侧打开。

// 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%; }

这样，4.子菜单之后的所有子导航将位于左侧。

下一步是，在几个UL之后重置此属性：

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

尝试使用它。

我从未开发过如此多的嵌套导航，但此片段在其他情况下可能会有用。

希望这有帮助。

Answer 4

你的superfish.css中的

改变了这个类的左边属性：

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left:           10em;
    top:            0;
}

将左侧属性设为负值：

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left:           -12em;
    top:            0;
}