Navigation Menus

List Boxes

Both ordered (ol) and unprdered (ul) lists are a key structure for expressing relationships groups of items.

<ol title="Site Contents">
  <li title="Introduction">Chapter 1</li>
  <li title="The Web">Chapter 2</li>
  <li title="HTML">Chapter 3</li>
</ol>

There are three boxes associated with a list item:

• the box containing the item content, called the principal box (yellow background in the illustration)
• a separate box containing the marker
• the outer box containing the entire list (gray beckground with red outline in the illustration).
• 

Note

Older versions of Internet Explorer treat the relation between the list item, its marker, and the enclosing box differently from the other main browsers (Firefox, Chrome, Safari, Opera). IE 8 is still around because it is the highest version that can be used with Windows XP. Microsoft has not supported XP since April, 2014, but there are still people using it.

Marker position

• The list property list-style-position change the position of the marker to be either inside or outside the principal box.
• The default value is outside.
• The list below uses list-style-position: outside
  • Item one - a longish list item which will wrap to demonstrate how the marker is outside. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Item two - Vivamus tempus, leo ut commodo varius, mauris ipsum facilisis orci, feugiat mollis nibh libero nec lectus.
• The list below uses list-style-position: inside
  • Item one - a longish list item which will wrap to demonstrate how the marker is inside.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Item two - Vivamus tempus, leo ut commodo varius, mauris ipsum facilisis orci, feugiat mollis nibh libero nec lectus. .

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.

<ul style="list-style-image: url(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>

A problem with list-style-image

Using images as list markers can be visually effective, but list-style-image presents some challenges.

• the image cannot be scaled. It must be the exact size you want to use.
• the image cannot be positioned. It is aligned with the bottom of the text. (The example is the same except for the font size.)
  • This list uses the same graphic arrow marker.

A crude solution is to put the image in the content for each list item using img tags, controlling position with margins and padding. But this requires repeating the code for every item. It also adds purely visual content that is meaningless structurally.

Using a background image as a marker.

Instead of a list-style-image, you can use a background image for the principal box to create a visual marker. Just add padding on the left of the item to provide space for it.

     ul {
        list-style-type: none;
        }
     
     li {
         padding-left: 10px; 
         background: url(marker.gif) no-repeat left center;
         font-size: 2em;
         }

Lists and Menus

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 examples

As we seen, there is no special styling other than the decimal-leading-zero marker type. It still looks like a list. But with additional styling, a navigation menu can be made an integral, decorative part of the page.

The first example uses a graphic marker, and the list items are styled to look like buttons. There is no change in the list itself.

#example1 ol li {
    list-style-type: none;
    padding-left: 18px;
    background: #ddb url(marker.gif) no-repeat 3px 50%;
    width: 6em;
    border: outset thin #cba
    }  

Even though the whole item looks like a button, only the text in the anchor is clickable.

The solution is to display the anchor as a block. We will move most of the styling to the anchor, though only the background and padding make a difference, so all of the "button" styles ae together. We will also get rid of the margin between the list elements, so the menu mnow looks like a single unit.

#example2 ol li {
    list-style-type: none;
    margin-top: 0; 
    margin-bottom: 0; 
    }  

#example2 a{
    border: none;
    display: block;
    padding-left: 18px;
    background: #ddb url(marker.gif) no-repeat 3px 50%;
    width: 6em;
    border: outset thin #cba;
    }  

The entire area is now clickable.

Horizontal menus

For a horizontal menu, we want the links to be side by side. The preferred way is to simply float the blocks.

For this example, we just add "float: left;" to the the style rules for the anchor.

     #example3 a{
        float: left;   /* plus the rules from the previous example */
        }

• However the containing block (with the blue background) does not extend to fit over the menu bar.
• This is a common problem with floated blocks. (The only reason this text doesn't flow up beside the menu is that it has a "clear: left;" rule.)
• There are several ways to solve this problem.
  • One is to put an extra element, such as a div, inside the containing block and give it a "clear: both;" rule. This adds an extra HTML element to the page that does not contribute meaningfully to the structure.
  • Another strategy is to float the containing block and then clear a subsequent one. But this can affect other styling and is not always easy to set up.
  • The third way is to give the floated block the rule "overflow: hidden".
• The example below adds an overflow rule for the list.

    #example4 ol {
        overflow: hidden;
        }

We will look at the overflow property in more detail later. For now, just know that it solves the problem.

Indicating the current page in a menu.

It is good design to style a navigation menu to indicate the current page. This helps the user know where she is, and prevents accidentally clicking on the link.

Although a menu could be custom coded for every page on a small site with just a few pages, this isn't practical on a large site and is impossible on sites with pages that are created by software.

• The key to a versatile solution is to
  1. Identify each page with an id attribute in the body tag.
  2. Classify the navigation menus that are to be modified
  3. Classify each list item according to the page that it links to
• Then use a selector to choose the specific link in the menu on the specific page - and style it.

Example: Identifying the current page.

This folder contains a small site with five pages. Start at any of the pages to see how the menu changes.

Each page begins essentially the same way:

<body  id="page1">
<ol class="menubar">
    <li class="page1"><a href="page1.html"> Chapter 1 </a></li>
    <li class="page2"><a href="page2.html"> Chapter 2 </a></li>
    <li class="page3"><a href="page3.html"> Chapter 3 </a></li>
    <li class="page4"><a href="page4.html"> Chapter 4 </a></li>
    <li class="page5"><a href="page5.html"> Chapter 5 </a></li>
</ol>

The only difference is the id value in the body tag.

The CSS that distinguishes the current page is:

#page1 ol.menubar li.page1 a ,
#page2 ol.menubar li.page2 a ,
#page3 ol.menubar li.page3 a ,
#page4 ol.menubar li.page4 a ,
#page5 ol.menubar li.page5 a {
   background: #eee;
   border: inset thin #cba;
   cursor: default;
   }   

Notice that:

• You can designate the same rule for multiple selectors by separating the selectors with commas
• A simple background and border change make the link look like a depressed button.
• The cursor is also changed, to hide the fact that the link is really still a link. Many of the familiar cursor shapes, such as a crosshair or the text-insertion I-bar can be specified in CSS. The hand that indicates a link is "pointer".