Superfish 菜单 - 如果右侧屏幕空间不足，则在左侧显示子项答案

【问题标题】：Superfish Menu - Display subitems left if there is not enough screenspace on the rightSuperfish 菜单 - 如果右侧屏幕空间不足，则在左侧显示子项
【发布时间】：2012-12-08 10:37:10
【问题描述】：

我有 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));
          }
        }
      }
    }
});

【问题讨论】：

你为什么不把最后一项 ul 放在正确的位置来解决这个问题。

标签： jquery superfish

【解决方案1】：

使用 CSS 快速修复。

ul.genesis-nav-menu li.menu-item:last-child .sub-menu {
    right: 0;
}

【讨论】：

【解决方案2】：

虽然这是一个非常古老的帖子，但我正在分享一个对我有用的解决方案，因为它可以帮助某人并节省时间。我在使用最新的 jquery superfish menu 1.7.9 时遇到了这个问题。我在那个论坛中找到了另一个 jquery 插件“Supposition”来解决这个问题。

(function($) { //create closure so we can safely use $ as alias for jQuery

  $(document).ready(function() {

    // initialise plugin
    var example = $('#example').superfish({
      //add options here if required                    
    }).supposition();

  });

})(jQuery);

jsfiddle link1 jsfiddle link2

【讨论】：

【解决方案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;
}

【讨论】：