CODEWITHSUNDEEP
jquerycssjquery-uijquery-ui-menu
AJ.
AJ.

Reputation: 16719

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

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?

menu

Upvotes: 0

Views: 1956

Answers (2)

Irvin Dominin
Irvin Dominin

Reputation: 30993

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/

Upvotes: 1

Palpatim
Palpatim

Reputation: 9272

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'}});

Upvotes: 3

Related Questions