3 Replies Latest reply on Jan 27, 2014 6:01 AM by Michal Petrov

    horizontal panelMenu

    Gadge D Newbie

      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:



      <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}"


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

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

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

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





              <h:panelGroup styleClass="lowerPanelMenu">

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



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



                              execute="@this" render="@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.

        • 1. Re: horizontal panelMenu
          Michal Petrov Master

          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?

          • 2. Re: horizontal panelMenu
            Gadge D Newbie

            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 ?

            • 3. Re: Re: horizontal panelMenu
              Michal Petrov Master

              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:

              Screenshot from 2014-01-27 11:56:19.png

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

              1 of 1 people found this helpful