Portal Express, Version 6.0
Operating systems: i5/OS, Linux, Windows
Menu element design examples
You format the look and feel of menu elements using HTML and placeholder tags.
Simple menu design
This example shows the basic structure of the element design used by a menu to format the search data. You enter the following tags into the Design for each menu search result section of the menu element form.
| Design for each menu search result | |
|---|---|
|
<a href="
| Instead of a URL, use a href placeholder. |
|
<placeholder
| Instead of text, insert a name placeholder. |
This will be repeated for every link returned by the search query defined in the menu element. You can also use a NameLink tag:
| Design for each menu search result | |
|---|---|
|
<placeholder
| This produces the same result as the above example. |
Vertical menu design
| Header | |
|---|---|
| <table> | You enter the table tag in the header section of the menu element form to open the table. |
| Design for each menu search result | This creates a new table row for every item listed in the menu. |
|
<tr><td>
| 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
| 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 element 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 element form to open the table and row. |
| Design for each menu search result | This creates a new table cell for every item listed in the menu. |
|
<td>
| 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
| 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 element form to close the table and row. |
Use a menu to display images
To display images in a menu instead of text, replace the name placeholder with a reference to an Image element selected from content or site areas.
| Design for each menu search result | |
|---|---|
|
<a href="
| Instead of a URL, use a href placeholder. This is where the URL of the menu item will be inserted in the rendered menu. |
|
<element
| Instead of a name placeholder (as in the previous example), insert an IBM® Workplace 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 element named "Image". The images you store in the site area or content can be different, but they must all have the same label.
|
Add a page navigation element to a menu design
To add navigation controls to a menu you add a reference to a page navigation element in either the footer or header.
| Header | |
|---|---|
| <table> | You enter the table tag in the header section of the menu element form to open the table. |
| Design for each menu search result | This creates a new table row for every item listed in the menu. |
|
<tr><td>
| 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
| 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 | |
|
<tr><td>
| Add a reference to a previously created page navigation element to add navigation features to a menu design. In this example, the page navigation element is referenced from a page navigation component called "pagenav". |