Is there a way to force a jQuery UI menu submenu to always position up instead of down?

Question

I have a simple jQuery UI menu with a header bar over the top:

<div style="width: 100%; min-height: 100px;"></div>
<ul id="menu" style="width: 100px;">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a>
    <ul>
      <li><a href="#">Item 3-1</a></li>
      <li><a href="#">Item 3-2</a></li>
      <li><a href="#">Item 3-3</a></li>
      <li><a href="#">Item 3-4</a></li>
      <li><a href="#">Item 3-5</a></li>
    </ul>
  </li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

<script type="text/javascript">
    $(document).ready(function(){
        $("#menu").menu();
    });
</script>

Fiddle here: http://jsfiddle.net/uW44Y/

Is there a way I can force the submenu from Item 3 to always open up from it's heading instead of down?

Answer 1

The jQuery UI menu API supports a position attribute: http://api.jqueryui.com/menu/#option-position. Try something like $("#menu").menu({position: {my: 'left bottom', at: 'top right'}});

Answer 2

You can use jQuery position option to setup the position of the submenus.

Ref:

Identifies the position of submenus in relation to the associated parent menu item. The of option defaults to the parent menu item, but you can specify another element to position against. You can refer to the jQuery UI Position utility for more details about the various options.

jQuery UI position: http://api.jqueryui.com/position/

Code:

$("#menu").menu({
    position: {
        my: 'left bottom',
        at: 'right bottom'
    }
});

Demo: http://jsfiddle.net/89Wpf/