title: Superfish Menu - Display subitems left if there is not enough screenspace on the right
body: <p>I have 3 level menu.
  I want the sub menus to be open in left direction instead of right when there is not enough screenspace to show them.</p>
  
  <p>Please take a look at the screenshot to get the exact idea.</p>
  
  <p><img src="https://i.stack.imgur.com/zlm4q.jpg" alt="enter image description here"></p>
  
  <p>I want to use the onBeforeShow() function of superfish menu to fix this, but I am not able to make it work as desired.</p>
  
  <p>Here's my code so far:</p>
  
  <pre><code>$("ul.sf-menu").superfish({
      delay: 1000,
      speed: 'fast',
      disableHI: true,
      onBeforeShow: function()
      {
        thisWidth = $(this).width();
        if  ( thisWidth &gt; 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 ) &lt; ( mainLeft + mainRight ) )   
          {
            if  ( thisWidth &gt; ( parentLeft + parentHeight ) ) 
            {
              $(this).css('left', - (parentLeft - mainLeft));
            } 
            else 
            {
              // open left
              $(this).css('left', - (thisWidth - parentWidth));
            }
          }
        }
      }
  });
  </code></pre>