有没有办法强制jQuery UI菜单子菜单始终位于而不是向下?

时间:2013-12-17 16:43:13

标签: jquery css jquery-ui jquery-ui-menu

我有一个简单的jQuery UI菜单,顶部有一个标题栏:

<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>

在这里小提琴:http://jsfiddle.net/uW44Y/

有没有办法可以强制从第3项到始终的子菜单从它的标题而不是向下打开?

menu

2 个答案:

答案 0 :(得分:3)

jQuery UI菜单API支持position属性:http://api.jqueryui.com/menu/#option-position。尝试类似$("#menu").menu({position: {my: 'left bottom', at: 'top right'}});

的内容

答案 1 :(得分:1)

您可以使用jQuery position选项设置子菜单的位置。

价:

  

标识子菜单相对于关联的位置   父菜单项。选项默认为父菜单项,但是   您可以指定另一个要定位的元素。你可以参考   jQuery UI Position实用程序,了解有关各种的更多详细信息   选项。

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

代码:

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

演示:http://jsfiddle.net/89Wpf/