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

    horizontal panelMenu

    Gadge D Newbie

      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.

        • 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