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。

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

希望这有助于。

PrimeFaces菜单栏滚动块子菜单

1 个答案: