Dock menu for Mac OS fans

The PrimeFaces dock menu transforms images into a Mac-like dock menu, with icons that expand on rollover. Thus, the Dock component mimics the well-known dock interface of Mac OS X. The component consists of menu items and can be built declaratively or programmatically by model.

In this recipe we will develop a dock menu with social media icons.

How to do it...

Menu items should be direct children of p:dockMenu. We will take advantage of the url attribute, which is # in this sample, but represents a valid URL in the real world.

<p:dock id="dock" position="bottom">
  <p:menuitem value="Digg" icon="/resources/images/dock/digg.png" url="#"/>
  <p:menuitem value="Facebook" icon="/resources/images/dock/facebook.png" url="#"/>
  <p:menuitem value="LinkedIn" icon="/resources/images/dock/linkedin.png" url="#"/>
  <p:menuitem value="Picasa" icon="/resources/images/dock/picasa.png" url="#"/>
  <p:menuitem value="Skype" icon="/resources/images...