css - PrimeFaces 菜单栏滚动 block 子菜单

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

由于菜单栏元素有点多，所以会出现滚动条。

为了保持子菜单的子菜单的大小写，我不得不覆盖 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 支持这些值。

希望这对您有所帮助。