如果沒有足夠的空間，如何讓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中更改此類的left屬性：

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