Statically and dynamically positioned menus

A menu can be positioned on a page in two ways: statically and dynamically. A menu is static by default. This means that the menu is in the normal page flow. A dynamic menu, in contrast, is not in the normal page flow and overlays other elements. In terms of CSS, it is absolutely positioned.

In this recipe, we will see how we can develop these two kinds of positioned menus. But first, we will meet submenus and menu items.

How to do it…

A menu is composed of submenus and menu items. Submenus group single menu items. Grouped menu items can be presented in the same page flow or in an overlay over other elements. This behavior depends on the type of menu. The simple p:menu menu shows grouped menu items in the same page flow. Let's define an example structure of a static menu:

<p:growl id="growl"/>

<p:menu>
  <p:submenu label="JavaScript Libraries">
    <p:menuitem value="jQuery" url="http://jquery.com"/>
    <p:menuitem value...