BEA WebLogic User Manual page 83

Menu Design Tips
The first of the three preceding illustrations uses a two-column table to avoid awkward wrapping
that would result in three menu items on the first row and one on the second. This highlights an
issue that content developers should keep in mind. Deciding on whether to use tables or lists to
style navigation has to be thoroughly considered. Each has its advantage.
Tables can be styled with borders and backgrounds (if the device supports these things). The
drawback, however, is accommodating the varying screen widths of the smaller devices. What
may look good on a Nokia 3650 may wrap excessively on a Sharp GX10. On some browsers,
exceeding the width of the screen will result in the table being automatically reduced to a single
column.
Lists have a bit more flexibility. If the browser supports wrapping, the menu items will wrap
automatically when the maximum screen width of the requesting device is reached.
Using images as menu links with no additional text below or beside the image works well in a
list. The images, however, must be equal in size.
The should have the following
<mm-structure>
navstyle="nav-format: list; nav-list-item-display: inline; nav-text-
display:none"
The result is that the browser will "wrap" the list of icons to fit the screen. The benefit of this is
that the content author doesn't have to "hard code" the number of columns or rows; they can rely
on the browser to decide.
This method generally gives the most visually appealing result across a range of devices.
Note: Try to keep text strings used in navigation to as short a length as possible.
More Navigation Lists for Handheld Devices
Up to this point, the navigation lists described have been created using pre-defined groups.
Selected groups on a single page have been referred to from within an
group headings form the link text and clicking on the link takes the user to the content of that
group. Sometimes, however, you might want to create a navigation list whose items are not based
on any pre-defined group. WebLogic Mobility Server provides two tags to let you do this.
•
<mm:nl>
•
<mm:li>
These two tags are roughly the equivalent of the XHTML 2.0 tags
attributes can be added to each of these tags in order to manipulate the navigation to best suit the
requesting device.
The following is an example of how these tags can be used.
<div style="border: 1px solid">
<mm:nl navstyle="nav-format: table; nav-table-columns: 2" where="IsPDA">
<mm:li navstyle="nav-image: url(clubs.gif)" href="clubs.htm">Clubs</mm:li>
<mm:li navstyle="nav-image: url(diam.gif)" href="diam.htm">Diamonds</mm:li>
<mm:li navstyle="nav-image: url(spades.gif)"
href="spades.htm">Spades</mm:li>
<mm:li navstyle="nav-image: url(hearts.gif)"
href="hearts.htm">Hearts</mm:li>
Part IV Presentation of Mobile Content
attribute properties:
navstyle
<mm:structure>
<nl>
BEA WebLogic Mobility Server User Guide - 79
. The
and . Styling
<li>