3

3レベルのメニューがあります。サブメニューを表示するのに十分な画面スペースがない場合、サブメニューを右ではなく左方向に開くようにします。

正確なアイデアを得るために、スクリーンショットを見てください。

ここに画像の説明を入力

これを修正するために superfish メニューの onBeforeShow() 関数を使用したいのですが、思い通りに動作させることができません。

これまでの私のコードは次のとおりです。

$("ul.sf-menu").superfish({
    delay: 1000,
    speed: 'fast',
    disableHI: true,
    onBeforeShow: function()
    {
      thisWidth = $(this).width();
      if  ( thisWidth > 0 ) 
      {
        thisParent = this.parent();
        parentLeft = thisParent.offset().left;
        parentWidth = this.parent().width();
        parentRight = parentWidth + parentLeft ;

        mainLeft =  document
          .getElementsByClassName('sf-menu')[0].offsetLeft;

        mainRight = document
          .getElementsByClassName('sf-menu')[0].offsetWidth;

        if  ( ( thisWidth + parentLeft ) < ( mainLeft + mainRight ) )   
        {
          if  ( thisWidth > ( parentLeft + parentHeight ) ) 
          {
            $(this).css('left', - (parentLeft - mainLeft));
          } 
          else 
          {
            // open left
            $(this).css('left', - (thisWidth - parentWidth));
          }
        }
      }
    }
});
4

3 に答える 3

3

私は現在、このコードを使用して、私が取り組んでいるサイトの問題を解決しています:

onBeforeShow: function() {
   if($(this).parents("ul").length > 1){
      var w = $(window).width();  
      var ul_offset = $(this).parents("ul").offset();
      var ul_width = $(this).parents("ul").outerWidth();

      // Shouldn't be necessary, but just doing the straight math
      // on dimensions can still allow the menu to float off screen
      // by a little bit.
      ul_width = ul_width + 50;

      if((ul_offset.left+ul_width > w-(ul_width/2)) && (ul_offset.left-ul_width > 0)) {
         $(this).addClass('too_narrow_fix');
      }
      else {
         $(this).removeClass('too_narrow_fix');
      }
   };
}

適用される CSS は次のとおりです。

.too_narrow_fix {
   left: -14.5em !important;
   top: .5em  !important;
}
于 2013-06-27T02:20:18.080 に答える