WCM v5.1 Menu Formatting Examples
Overview
The following tables contain some examples of the ways you can format the look of a Menu.
Simple Menu Design
This example shows the basic structure of the Component Design used by a Menu to format the search data. This is entered into the Component Design section of the Menu Component form.
Component Design Description Insert the URL of the menu item in the rendered Menu. Instead of text, insert a Name placeholder. This is where the title of the Menu item will be inserted in the rendered Menu. This will be repeated for every link returned by the search query defined in the Menu Component. Alternatively, the NameLink tag could have been used:
Component Design Description <placeholder tag="namelink" /> <br>
This produces the same result as the above example.
Vertical Menu Design
Header <table> The table tag is entered in the Header section of the Menu Component form to open the table. Component Design This creates a new table row for every item listed in the Menu. <tr><td> <a href=" <placeholder tag="href" /> ">
Instead of a URL, insert a URL placeholder here. This is where the URL of the Menu item will be inserted in the rendered Menu. To have your Menu display as a vertical list, a table row and table cell tag (<tr><td>) are added. <placeholder tag="name" /> </a><br> <tr></tr>
Instead of text, insert a Name placeholder. This is where the title of the Menu item will be inserted in the rendered Menu. </td></tr> are added to close the cell and row. Footer </table> This tag is entered in the Footer section of the Menu Component form to close the table.
Horizontal Menu Design
Header <table><tr> The Table and Table row tags are entered in the Header section of the Menu Component form to open the table and row. Component Design This creates a new table cell for every item listed in the Menu. <td> <a href=" <placeholder tag="href" /> ">
Instead of a URL, insert a URL placeholder here. This is where the URL of the Menu item will be inserted in the rendered Menu. To have your Menu display horizontally, a table cell tag (<td>) is added. <placeholder tag="name" /> </a><br> </td>
Instead of text, insert a Name placeholder. This is where the title of the Menu item will be inserted in the rendered Menu. </td> is added to close the cell. Footer </tr></table> These tags are entered in the Footer section of the Menu Component form to close the table and row.
Using a Menu to display images
To display images in a Menu instead of text, replace the Name Placeholder with a reference to an Image Component selected from Content or Site Areas.
Component Design Description <a href=" <placeholder tag="href" /> ">
Instead of a URL, use an "a href" placeholder. This is where the URL of the Menu item will be inserted in the rendered Menu. <AptrixCmpnt type="sitearea" context="autofill" key="Image" /> </a></br>
Instead of a Name placeholder (as in the previous example), insert an Web Content Management Tag. The source type can either be Content or Site Area. The Context is autofill. In this example, the field being referenced is "Image". The Site Areas or Content being returned must also contain an Image Component named "Image". The images you store in the Site Area or Content can be different, but they must all have the same label.
Parent topic: Menu Components.
Parent topic: Component Design Examples.
IBM Workplace Web Content Management - V5.1.0.1 -
Workplace Web Content Management is a trademark of the IBM Corporation in the United States, other countries, or both.
IBM is a trademark of the IBM Corporation in the United States, other countries, or both.