5

スーパーフィッシュメニューを逆方向に開くにはどうすればよいですか？ファンページのFacebookアプリケーションにsupperfishメニューを埋め込みましたが、iframeで実行されるため、メニューを完全に展開するための十分なスペースがありません。superfisを使用してこの問題を解決するにはどうすればよいですか、または他のjqueryメニュープラグインも問題ありません。

ありがとうございました。

現状 現状

期待される結果 期待される結果

@Updated：これはユーザー定義のメニューであり、メニューレベルの制限はありません。

4

4 に答える 4

5

この質問は非常に古いことは知っていますが、参考までに、これは私が上記の問題を修正した方法です

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': ''});
                    }
                }
            }
        });
 });
于 2014-09-24T11:11:17.023 に答える
3

修正するためにこのスクリプトを作成しました。十分なスペースがない場合、メニューが右ではなく左に開くようになりました。

// 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',
            });
        }
    }
 });
于 2013-07-10T13:06:17.567 に答える
1 
ul ul ul ul ul { right: 100%; }

このように、サブメニューの後のすべてのサブナビゲーションは左側に配置されます。

次のステップは、次のようないくつかの UL の後にこのプロパティをリセットすることです。

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

遊んでみてください。

私はそれほど多くのネストされたナビゲーションを開発したことはありませんが、このスニペットは他の状況で役立つ可能性があります。

お役に立てれば。

于 2012-06-11T08:03:57.887 に答える
0

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;
}
于 2012-07-08T08:01:11.090 に答える