panelMenu

Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.PanelMenu
component-class | org.richfaces.component.html.HtmlPanelMenu
component-family | org.richfaces.PanelMenu
renderer-type | org.richfaces.PanelMenuRenderer
tag-class | org.richfaces.taglib.PanelMenuTag

## Creating the Component with a Page Tag

To create the simplest variant on a page use the following syntax:

Example:

    ...
          <rich:panelMenu event="onmouseover">
                <!--Nested panelMenu components-->
          </rich:panelMenu>
    ...

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlPanelMenu;
    ...
    HtmlPanelMenu myPanelMenu = new HtmlPanelMenu();
    ...

## Details of Usage

All attributes are not required.

Use "event" attribute to define an event for appearance of collapsing/expanding sublevels. Default value is "onclick" . An example could be seen below.

Example:

    ...
          <rich:panelMenu event="onmouseover">
                <!--Nested panelMenu components-->
          </rich:panelMenu>
    ...

Switching mode could be chosen with the "mode" attribute for all panelMenu items except ones where this attribute was redefined. By default all items send traditional request.

The "expandMode" attribute defines the submission modes for all collapsing/expanding panelMenu groups except ones where this attribute was redefined.

The "mode" and "expandMode" attributes could be used with three possible parameters.

- Server (default)

Regular form submission request is used.

- Ajax

Ajax submission is used for switching.

- None

"Action" and "ActionListener" item's attributes are ignored. Items don't fire any submits itself. Behavior is fully defined by the components nested into items.

Example:

    ...
          <rich:panelMenu event="onclick" submitMode="none">
                < rich:panelMenuItem label="Link to external page">
                      <h:outputLink ... >
                <rich:panelMenuItem>
          </rich:panelMenu>
    ...

Note:

As the <rich:panelMenu> component doesn't provide its own form, use it between <h:form> and </h:form> tags.

The "expandSingle" attribute is defined for expanding more than one submenu on the same level. The default value is "false" . If it's true the previously opened group on the top level closes before opening another one. See the picture below.

Using the "expandSingle" attribute

The "selectedChild" attribute is used for defining the name of the selected group or item. An example for group is placed below:

Here is an example:

Example:

    ...
          <rich:panelMenu selectedChild="thisChild">
            <rich:panelMenuGroup label="Group1" name="thisChild">
              <!--Nested panelMenu components-->
            </rich:panelMenuGroup>
          </rich:panelMenu>
    ...

## JavaScript API

In Java Script code for expanding/collapsing group element creation it's necessary to use Expand()/Collapse() function.

JavaScript API

Function | Description
--- | ---
Expand() | Expands group element
Collapse() | Collapses group element

## Look-and-Feel Customization

For skinnability implementation, the components use a style class redefinition method.

There are no skin parameters. To redefine the appearance of all <rich:panelMenu> components at once, you should add to your style sheets the style class used by a <rich:panelMenu> component.

## Definition of Custom Style Classes

Classes names that define a component appearance

Class name | Class description
--- | ---
rich-panel-menu | Defines styles for a wrapper <div> element of a component

In order to redefine styles for all <rich:panelMenu> components on a page using CSS, it's enough to create a class with the same name and define necessary properties in it.

To change styles of particular <rich:panelMenu> components, define your own style class in the corresponding <rich:panelMenu> attributes.

## Relevant Resources Links

Here you can see the example of <rich:panelMenu> usage and sources for the given example.