horizontal panelMenu

[gadge]

Hi,
in my case I'm trying to make panelMenu that has panelMenuItem components appear below panelMenuGroup.
Example if GROUP1 is clicked:
| GROUP1 | GROUP2 | GROUP3 | ... |
| G1ITEM1 | G1ITEM2 | ... |
I'm achieving it like this:

<h:form>

<rich:panelMenu id="panelMenu" activeItem="#{menuState.currentlySelectedMenuName}" itemChangeListener="#{menuState.updateCurrentlySelectedMenuName}" mode="ajax" expandSingle="true">

        <div id="upperPanelMenu">

            <c:forEach items="#{list}" var="menu">

                <rich:panelMenuGroup label="#{menu.name}" name="#{menu.name}"

                    expanded="#{menuState.isExpanded(menu.name)}">

                    <a4j:ajax event="collapse" listener="#{menuState.stateChangedCollapsed(menu)}"

                         execute="@this" render="@form"/>

                    <a4j:ajax event="expand" listener="#{menuState.stateChangedExpanded(menu)}"

                         execute="@this" render="@form"/>

                </rich:panelMenuGroup>

            </c:forEach>

        </div>

        <h:panelGroup styleClass="lowerPanelMenu">

                <c:forEach items="#{menuState.selectedMenuGroup.children}"

                    var="child">

                    <rich:panelMenuItem label="#{child.name}"

                        name="#{child.name}"

                        action="#{menuStateBean.redirect(child)}"

                        execute="@this" render="@form" />

                </c:forEach>

        </h:panelGroup>

    </rich:panelMenu>

</h:form>

The problem i face is that when i expand the group and then i expand another group, the previous one has its state left as expanded. If I generate panelMenuItems inside panelMenuGroup everything works good - like in showcase, BUT the items appear right near the group which is not how I want my menu to look like.
So my question would be - how to control the expanded state of a group somehow different than with expanded attribute ?
Some things i've noticed that may be usefull to your answers - when panelMenuGroup expanded attribute getter is called, it somehow calls only the menus that haven't yet been clicked, the ones clicked don't call the getter again.

[michpetrov]

Would it not be easier to create the panelMenu the way it's supposed to be and change the CSS to achieve the horizontal design?

[gadge]

Michal, how do you suggest to do that if panel menu item is wrapped inside menu group div ? It will then expand the div of the group making much of empty area:
GROUP 1|                                       |GROUP 2|...

|ITEM 1| |ITEM 2| |ITEM 3| |ITEM 4|...

or do you have something other in mind ?

[michpetrov]

The menuGroup will have to have set width and the div that holds the items (.rf-pm-top-gr-cnt) will have to be wider.

I've tried this (.p-menu is applied to rich:panelMenu):

.p-menu .rf-pm-top-gr {
    width: 150px;
    display: inline-block;
    vertical-align: top;
   border: none;
}        
                
.p-menu .rf-pm-top-gr-cnt {
    width: 1000px;
}
                              
.p-menu .rf-pm-top-gr .rf-pm-itm {
    display: inline-block;
    border: 1px solid grey;
    background-color: lightgrey;
}

The result looks like this:

The menus won't be aligned to the left side, if you want to do that you'll have to use absolute positioning.