PrimeFaces 菜单栏滚动块子菜单

Question

我正在开发一个简单的 CRUD 网络应用程序。用户想要编辑的表被放置在一个菜单中，用户可以在其中选择它们然后编辑它们。事实证明，并非所有用户都像我一样拥有大显示器，所以在这里我偶然发现了我的问题。当监视器或浏览器窗口不足以显示整个菜单时，菜单会获得一个垂直滚动条，只要菜单有滚动条，子菜单就不可见（隐藏在下面）。但是，您确实得到了一个水平滚动条，但这不是很实用。

我知道这是一个 CSS 问题，但我从来都不是 CSS 专家。我知道在这里和那里调整我的网页的基础知识，但这超出了我的 CSS 知识。我在网上搜索过，发现人们对面板有类似的问题。我已经尝试过他们的解决方案，但对我的情况不起作用。

你们所有的网络/CSS 专家，请帮助我。我知道过去我已经花了很多时间来解决类似的 CSS 问题，如果有人能更快地解决它，我将不胜感激。

我已尝试发布问题的图片，但我没有足够的声望点，所以我只发布代码：

<h:form>
    <p:menubar>  
        <p:submenu label="Menu 1" icon="ui-icon-document">  
            <p:submenu label="Choice 1" >
                 <p:menuitem value="SubChoice 1" url="#" />  
                 <p:menuitem value="SubChoice 2" url="#" />  
                 <p:menuitem value="SubChoice 3" url="#" />  
                 <p:menuitem value="SubChoice 4" url="#" />  
            </p:submenu>
            <p:menuitem value="Choice 2" url="#" />  
            <p:menuitem value="Choice 3" url="#" />  
            <p:menuitem value="Choice 4" url="#" />  
            <p:menuitem value="Choice 5" url="#" />  
            <p:menuitem value="Choice 6" url="#" />  
            <p:menuitem value="Choice 7" url="#" />  
            <p:menuitem value="Choice 8" url="#" />  
            <p:menuitem value="Choice 9" url="#" />  
            <p:menuitem value="Choice 10" url="#" />  
            <p:menuitem value="Choice 11" url="#" />  
            <p:menuitem value="Choice 12" url="#" /> 
            <p:menuitem value="Choice 7" url="#" />  
            <p:menuitem value="Choice 8" url="#" />  
            <p:menuitem value="Choice 9" url="#" />  
            <p:menuitem value="Choice 10" url="#" />  
            <p:menuitem value="Choice 11" url="#" />  
            <p:menuitem value="Choice 12" url="#" /> 
        </p:submenu>  
        <p:submenu label="Menu 2" icon="ui-icon-document" >  
             <p:menuitem value="Choice 1" url="#" />  
        </p:submenu>  
    </p:menubar>
</h:form>

如果您将浏览器的大小调整到整个菜单无法再显示的高度并且您看到垂直滚动，则可以重现该问题。然后，如果您进入子菜单，它将不再可见。

可能最明智的做法是将这个菜单条目分成某种组，但客户想要这样，所以我没有太多选择......

我正在使用 Primefaces 4.0、JBoss 7.1.1、NetBeans 7.4、Chrome 32

如果您需要更多信息，请告诉我。谢谢。

Answer 1

由于Menubar项有点多，所以会出现滚动条。

为了保持子菜单的子菜单的大小写，我不得不重写由PrimeFaces.widget.Menubar javascript 类完成的运行时样式。

在您的表单之后包含此脚本。

<script>
   PrimeFaces.widget.Menubar.prototype.activate = function(b) {
       this.highlight(b);
       var a = b.children("ul.ui-menu-child");
       if (a.length == 1) {
           b.parent().css('display', 'table')
           this.showSubmenu(b, a)           
       } else{
           b.parent().css('display', 'block')
       }
   }
</script>

可以在github 上找到一个小的工作示例。 还有一个online Demo。

注意： display : 'table' 在 IE7 及更早版本中不受支持。 IE8 需要一个!DOCTYPE。 IE9 支持这些值。

希望对您有所帮助。