菜单错误的解决方法

Question

使用 Primefaces 2.2.1，如果菜单栏的子菜单对于浏览器窗口来说太大，它会出现在菜单栏上方（页面外部）并且无法使用。

简单的测试用例：

代码：

<p:menubar>
<p:submenu label="test">
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
<p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
...
</p:submenu>
<p:menubar>

如果将窗口尺寸减小到某个小的高度，您就可以看到问题。

它也发生在展示中，尽管子菜单被简单地隐藏了。

这使得它对于某些客户端（ipad）无法使用。

有什么解决方法或解决方案吗？

更新：我可以在此页面上重现该问题： http://wijmo.com/widgets/wijmo -打开/菜单/；如果将窗口高度减小到略小于菜单大小，它就会出现在上方。

Answer 1

你能给我们看一张图片吗？如果您不坚持使用 2.2.1，您也可以升级到 3.0.M4 版本...

我已经在版本 3 中测试了您的代码，并且如果我有很多 menuItems< /code>，出现一个滚动，以便轻松导航到最后一项。

不管怎样，我认为如果你需要为一个子菜单提供如此多的菜单项，那么设计在某种程度上是错误的！

另一种解决方案是在页面的左角/部分使用分层或滑动菜单 - 对于这些类型的情况，我更喜欢滑动菜单：您可以一千个子菜单项！
http://www.primefaces.org/showcase-labs/ui/menu.jsf编辑

：
由于您无法更改 primefaces 版本，也许是时候在其他地方寻找解决方案了：

• jquery 解决方案，简单而高效：
  我在这里编写了代码（html，css，javascript），您可以在东南框中看到结果 - http ://jsfiddle.net/4UFmk/。

源博客： http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery

编辑2：

您不必更改来自 Primefaces（顺便说一句，PF 组件已经使用 jquery），因此您可以使用它的内置 jquery 版本（PF 2 为 1.4，PF 3 为 1.6）：

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />

因此您可以在 primefaces 组件内拥有一个简单的 html/jquery 解决方案。

EDIT3：

修复 Primefaces menuBar 实现 - 添加 jquery 函数来修复单击菜单项时子菜单（ul）的显示方式：

<h:form id='menuForm' >
     <p:menubar>
        <p:submenu label="test">
          <p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
          <p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
          <p:menuitem> <h:commandLink value="test 123"/> </p:menuitem>
          ...
        </p:submenu>
     <p:menubar>
</h:form>
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" /> <!-- use the jquery library built-in primefaces -->
<h:outputScript>
// Add the $() function to avoid conflict with primefaces
$ = jQuery;
function mainmenu(){
    $("#menuForm li").click(
        function(e){
            $(e.currentTarget).children("ul").css("top", 28);
        });
}
$(document).ready( function(){ mainmenu(); });
</h:outputScript>

Answer 2

这是我根据 @spauny 的建议实施的解决方案。

它适用于 id="menuForm" 元素下的菜单（在我的例子中，这是我的表单）。另外，我仅在 clickend 时显示菜单，如果需要，请将 click() 替换为悬停（）。

<h:outputScript>
$ = jQuery;
function mainmenu(){
    $("#menuForm li").click(
        function(e){
            $(e.currentTarget).children("ul").css("top", 28);
        });
}
$(document).ready( function(){ mainmenu(); });
</h:outputScript>