Offload to style sheets

It's time to clean up the formatting a bit.  At this stage the document header is getting a little bloated, so most of that bloat has been offloaded to the style sheets.  The general layout styles have been offloaded to tutLayout1.css, which can be downloaded here.  The navHd styles have been offloaded to tutNavH1.css, which can be downloaded here.  And both style sheets have been linked into the document in the header, after the link for default.css.  As with previous examples, new working styles will be added to the <style> element in the document header so the source for the example page can be easily viewed.  And at some later time it will be appropriate to offload them to style sheets.

Note that the IE Conditional Comments cannot be offloaded to style sheets.  They must remain in the document header.

Here is the new page driven by linked style sheets, rather than inline styles: example page.  It doesn't look any different from the previous version of the example page, but providing a link here makes it possible to view the page, then view the page source and copy that source code, as previously discussed.

Style it up

To improve and customize the look of the page, begin by adding the following styles:

  1. #navHd.navH, #navHd.navH ul {
      font-family: Arial, Helvetica, "Ludica Grand", sans-serif;
      background-color: #77d; /* required for IE 6 */
    }
  2. #navHd.navH li {
      background-color:#77d;
      border-top:1px solid #ddd;
      border-right: 1px solid #333;
      border-bottom: 1px solid #333;
      border-left: 1px solid #ddd;
      padding:0;
      color: #fff;
    }
  3. #navHd.navH a {
      padding:3px 5px 3px 5px;
      border:0;
      font-style:normal;
      font-weight:bold;
      text-decoration: none;
    }
  4. #navHd.navH a:link {
      color: #fff;
      background: #77d;
    }
  5. #navHd.navH a:visited {
      color: #ff6;
      text-decoration: none; /* needed for IE6 */
    }
  6. #navHd.navH a:hover {
      color: #ccc;
      background: #55b;
    }

The first three styles do nothing more than modify the base appearance of the menu items, though care was taken in the <li> style to retain top and bottom borders for the required IE 6 and 7 compliance hacks.  The fourth through sixth styles simply provide link, visited and hover pseudo class behavior for the links.  These are all purely cosmetic modifications, chosen for look, feel and style, and their selection is strictly a matter of the web designer's preferences.  However, since the sum of left border and padding was changed in the <li> style, for IE 6 functionality, it is imperative that the following styles be updated:

  1. #navHd.navH li ul {margin-left:-1px;}
  2. #navHd.navH li li ul {margin-left:0;}
  3. *html #navHd.navH li li ul {margin-left:-1px;}

These three simply follow the rules established earlier for tweaking the margins to have submenus line up with their parents and to eliminate the horizontal dead space between submenus in IE 6.

Note that these three styles were set in the style sheet, then overridden in the document header.  This works, but it's poor programing practice.  It makes it harder to maintain or change the code, and it adds additional bytes to the document that must be downloaded from the server to display the page, slowing down page viewing.  This was done here for the sake of the flow of this tutorial, but in practice the styles should be set once in the style sheet.

With these changes made, view the results here: example page.

Dropdown and Flyright arrows

Until now the dropdown arrows employed a back-slash/forward-slash combination (\/), and the flyright arrows used a greater-than symbol (>), a cheap and easy means of simulating arrows using text elements.  But they're just darn ugly, and it's not really clear to most users exactly what they signify.  A much better approach is to use a small graphic element, like a Portable Network Graphics (PNG) file.

PNG files support a transparent background color, so one can create down and right arrow images with transparent backgrounds, place them in the background of the appropriate <a> elements, and not be concerned with the change in the background color that occurs in the <a> element on hover.  Unfortunately, IE 6 doesn't support transparency in background image elements without some serious hacking, so a more robust approach is needed.

To accommodate the older browser, and use an approach that works with newer browsers as well, four separate images were created:

  • white arrow, down, normal (bkgnd=#77d)
  • white arrow, down, hover (bkgnd=#55b)
  • white arrow, right, normal (bkgnd=#77d)
  • white arrow, right, hover (bkgnd=#55b)

Download these images here.

Each image contains a white arrow with a surrounding color that matches the background color of the menu item and its state, normal or hover.  In that way it blends into the background color displayed; not as elegant as PNG background transparency, but it works in both old and new browsers.

Note that the a:visited rule above defines a yellowish color (#ff6) for the text of menu elements that have been visited.  For consistency, one could create yellow arrows and apply those to the visited state, though one would have to create the yellow equivalent of all four arrows shown above, then manage eight different arrow images.

To apply these images add the following styles to the document header:

  1. #navHd.navH a.dropdown {
      padding-right: 24px;
      background:#77d url('arrow_d_norm.png') no-repeat right center;
    }
  2. #navHd.navH a:hover.dropdown {
      background:#55b url('arrow_d_hov.png') no-repeat right center;
    }
  3. #navHd.navH a.flyright {
      padding-right: 24px;
      background:#77d url('arrow_r_norm.png') no-repeat right center;
    }
  4. #navHd.navH a:hover.flyright {
      background:#55b url('arrow_r_hov.png') no-repeat right center;
    }

The base dropdown and flyright styles add extra padding on the right to make room for the image, then place the appropriate image in the background of the element.  The hover styles change the image to one with an appropriate background color.

Next,

  1. remove the rather amateurish looking text elements meant to simulate down and right arrows from the text of the various <a> menu elements, and
  2. include the appropriate class reference in the <a> element.

For example, after modifying:

<a href="http://www.jldoty.com">Item 2 \/</a>,

it should read:

<a class ="dropdown" href="http://www.jldoty.com">Item 2</a>.

A similar change is necessary for the flyright elements.

At this point the horizontal menu is attractive and works well, even in older browsers like IE 6.  View the results here: example page.

It is the style rules discussed on this page that are the key to customizing the look and feel of this horizontal dropdown and flyright navigation bar.

A complete horizontal menu style sheet

Since the styling of the horizontal menu is complete, now is a good time to remove the bloat from the document header and create a stand-along horizontal-menu style sheet.  No general layout styles were added after offloading to tutLayout1.css, so that style sheet remains unchanged.  The styles from tutNavH1.css were copied to tutNavH2.css, and the new navHd styles were offloaded from the document header and incorporated into tutNavH2.css, which can be downloaded here.

Note that in addition to offloading the new navHd styles to tutNavH2.css, the style overrides that occurred as a result of the step-by-step process in this tutorial have been consolidated to eliminate bloat.

Here is the final document using a complete style sheet: example page.

Next

The next tutorial describes how to employ sophisticated background images for the menu items.

Horizontal:  H-1  H-2  H-3  [H-4H-5  next