DHTML Menu

[resplin]

Obsolete Pages{{Obsolete}}

The official documentation is at: http://docs.alfresco.com

JSF Component
Back to Component Library

Table of Contents

• 1 Menu
  
  
  
  • 1.1 General Description
  
  
  • 1.2 Tag details
  
  
  • 1.3 Custom tag attributes
  
  
  • 1.4 Example
  
  
  • 1.5 Screenshots
  
  

Menu

General Description

The menu component displays a pop-up DHTML menu containing multiple ActionLink components. A simple link and/or image is displayed to the user, which when clicked will pop-up a menu of items. Each item is an ActionLink component with the image part rendered as the icon for the menu item. Evaluators can be used to wrap ActionLink components or simply use the rendered attribute directly to hide/show items as needed.

Tag details

<string>' MANDATORY
  rendered='<boolean>'
  tooltip='<string>'
  styleClass='<string>'
  style='<string>'
  menuStyleClass='<string>'
  menuStyle='<string>'
  itemSpacing='<int>'
  label='<string>'
  image='<string>'
/>

Custom tag attributes

menuStyleClass - CSS class to apply to the element surrounding the menu items.

menuStyle - CSS style to apply to the element surrounding the menu items.

itemSpacing - spacing around and between the menu items.

label - label to display as clickable link to drop-down or hide the menu.

image - image to display as clickable item to drop-down or hide the menu.

Note that both image and label are optional but at least one should be specified.

Example

Simple menu with 4 child ActionLink items, the fourth item is hidden from the user:

  <a:menu id='menu1' itemSpacing='4' label='More...' tooltip='Menu tooltip'
        menuStyle='background-color:#FFFFFF; border:thin solid #AAAAAA;'>
     <a:actionLink value='Item 001' actionListener='#{bean.clickaction}' />
     <a:actionLink value='Item 002' actionListener='#{bean.clickaction}' />
     <a:actionLink value='Item 003' actionListener='#{bean.clickaction}' />
     <a:actionLink value='Should not see this' rendered='false' />
  </a:menu>

Menu with ActionLink items using icon images and evaluators:

  <a:menu id='menu2' itemSpacing='2' label='Actions' image='/images/arrow_expanded.gif'
        styleClass='header' menuStyle='background-color:#EEEEEE; border:thin solid #999999;'>
     <a:actionLink value='Menu Item' image='/images/icons/BlueArrow.gif' />
     <a:actionLink value='Click Me' image='/images/icons/link_small.gif' />
     <a:actionLink value='No Image here' action='success' styleClass='header' />
  </a:menu>

Screenshots

Simple menu component:

Menu_1.gif

Menu with icons and styles:

Menu_2.gif