jquery - 空间不足时如何使超级鱼菜单向后打开？

Question

如何使超级鱼菜单向后打开？我在 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 中更改此类的 left 属性：

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

像这样使 left 属性为负：

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