Lists & menus

Lists

Lists are a key structure for expressing relationships groups of items. The two segments in the following example look the same in a graphical browser.

However the second version adds the structural information that the items are part of a list, distinct but related, not just text in a paragraph. The structure also allows the addition of title and id attributes to each list item.

<p title="Book Contents">
1. Chapter one<br />
2. Chapter two<br />
3. Chapter three</p>

<ol title="Book Contents">
  <li title="Introduction">Chapter one</li>
  <li title="The Web">Chapter two</li>
  <li title="HTML">Chapter three</li>
</ol>

List boxes

Browsers interpret the relation between the list item, its marker (bullet or numeral), and the enclosing box differently. See Lists and Indentation by Eric Meyer.

Using lists

If items are part of a list (list of links;to-do list; hit list; whatever list) use a list structure to present them. For example, here is a table of contents that uses nested ordered lists. (It is designed to be used as a narrow sidebar.)

Navigation menus are often created using tables. View the source code for this menu bar extracted from an old version of the CS department page. Although it is effective visually (assuming the colors are handled properly), the code has no way to indicate that the text forms a related group of links. Furthermore, the text in some other cells (the pipe characters) is purely decorative. Imagine trying to understand the structure with an aural user agent.

The source code for a version using list structures (shown without any added styles) conveys the intent much more directly. The use of an ordered list also makes referring to the menu items easier if, for example, the display is not visual or the user-input is oral. The challenge is to have both the structural clarity of the list structure and the visual quality of the menu that uses table or graphics.

Default list style

The different types of lists have default styles of presentation that reflect familiar word processing conventions. An ordered list was shown in the previous example.

<ul>
  <li>An item</li>
  <li>Another item</li>
  <li>Yet another item</li>
</ul>

The list-style-type attribute

Ordered and unordered lists are similar in structure.

• A list item is displayed with a principal box for the element's content and with an optional associated marker box.
• The list-style-type attribute specifies the appearance of the marker.
• The values fall into three categories:
  • glyphs (symbols such as bullets)
  • numbering systems,
  • alphabetic systems.
• Glyphs can be specified as disc, circle, or square.
• There are several numbering systems, including not only decimal (1, 2, 3), upper-roman (I, II, III), and lower-roman (i, ii, iii), but also decimal-leading-zero, hebrew, georgian, armenian, and others, though not all are supported by all browsers.
• Alphabetic systems for ordered lists are lower-latin/lower-alpha (a, b, c), upper-latin/upper-alpha (A, B, C), and lower-greek.

The list markers are special cases of a more general marker/counter concept that can be used to create new list styles, number margin notes, and more, but is not yet well-supported by browsers. (documentation)

The list-style-type value none suppresses the display of the marker box.

The list-style-type is a attribute for the list (the <ul> or <ol>), not the individual items.

<ol style="list-style-type: upper-roman">
  <li>Item One
    <ol  style="list-style-type: upper-alpha">
        <li>Item one</li>
        <li>Item two
              <ol  style="list-style-type: decimal">
                <li>Item one</li>
                <li>Item two</li>
                <li>Item three</li>
              </ol>
        </li>
        <li>Item three</li>
    </ol>
  </li>
  <li>Item Two
      <ul  style="list-style-type: disc">
          <li>Item </li>
          <li>Item </li>
          <li>Item </li>
      </ul>
  </li>
  <li>Item Three</li>
  <li>Item Four</li
      <ul  style="list-style-type: none">
          <li>Item </li>
          <li>Item </li>
          <li>Item </li>
      </ul>
  </li>
</ol>

The list-style-image property

The value of the list-style-image property designates an image that will be used as the list item marker. If the image is not available, the marker determined by list-style-type (possibly the default) will be displayed. The wyrd index page uses an image list marker.

<ul style="list-style-image: url(../graphics/marker1.gif)">
  <li>This list uses an image as the marker. </li>
  <li>It's a little graphic arrow. </li>
  <li>Here it is: <img src="../graphics/marker1.gif" alt="&gt;" />. </li>
</ul>

Navigation menus

As we've noted, lists are suitable for menus because they provide structural information and navigation assistance. However the default presentation takes up valuable screen space and is not suitable in some designs.

Using style rules,

• Items of a list can be styled to form a visually effective navigation menu while the underlying structure remains a list.
• A vertical menu can be created by simply setting the list style to none, and styling the individual item boxes as desired.
• A horizontal menu bar is a bit more of a challenge. The secret is to float the individual list boxes so that they fill in beside each other.

Vertical menu example

The stylesheet for the table of contents menu mentioned previously (the menu) uses list-style-type:none. Notice the extensive use of child selectors (effective in a standards-compliant browser only). Compare the CSS with the source code and the rendered result. The same visual effect could also be achieved with tables or paragraphs, but the structure wouldn't be the same.

Horizontal menu example

Here's the horizontal nav bar menu from the department site, designed using a list structure. (It's not as effective in a non-compliant browser, but it's still satisfactory.) You can see the style rules by viewing the source code.

Accessible Navigation

A standard navigation menu displayed as a horizontal bar or in a sidebar may be unobtrusive in the graphical rendering. However the first thing the user with a screen reader hears, or the Lynx user sees, on every page is a long list of links. Accessibility guidelines specify that documents must provide a way to skip over this navigation to the main content.

The simplest solution is a link at the top titled "Jump to Main Content" or "Skip over Navigation".

Of course that extra link msy look strange in the graphic version. So a style rule can be used to hide it, typically by using display: none or by making the text color the same as the background color.

Example

To see the structure, choose "No Style" from the Page Style entry under Firefox's View menu.

On the topics page of a CS 581 site, the menu box in the corner has a link to skip over it. The link is the same color as the background, so it is not noticeable. The assumption (not necessarily 100% correct) is that the colors will not be rendered by the user agents for which the link is necessary. On the linked example page, there are actually two such links, one at the top of the fixed box, and one right under "Class Topics".

Lab Practice Exercise 05: Making Menus

1. start with the practice document. It contains three copies of a list.
2. Give each of the lists an id attribute so they can be distinguished from each other.
3. Add CSS rules for the three lists.
   1. The first one should be presented as a horizontal menbar.
   2. The second one should be vertical, with the image as the marker. Be sure to specify what the marker will be if the image is not available.
   3. The third one should be vertical, and should look approximately like buttons.
4. Do not change the lists except for adding id or class attributes.
5. Do not use inline style rules.