Offload to style sheets

Just as before, it's time to offload the style bloat from the document header:

  • The added general layout styles have been combined with those previously defined and incorporated into tutLayout2.css, which can be downloaded here.
  • The added navHd styles have been combined with those previously defined and incorporated into tutNavH4.css, which can be downloaded here.
  • The navVd styles have been offloaded into tutNavV1.css, which can be downloaded here.
  • And all three 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.

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

The styling used in horizontal tutorial 2 is again used here, but rewritten for the vertical menu bar:

  1. #navVd.navV, #navVd.navV ul {
      font-family: Arial, Helvetica, "Ludica Grand", sans-serif;
      background-color: #77d; /* required for IE 6 */
    }
  2. #navVd.navV 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. #navVd.navV a {
      padding:3px 5px 3px 5px;
      border:0;
      font-style:normal;
      font-weight:bold;
      text-decoration: none;
    }
  4. #navVd.navV a:link {
      color: #fff;
      background: #77d;
    }
  5. #navVd.navV a:visited {
      color: #ff6;
      text-decoration: none; /* needed for IE6 */
    }
  6. #navVd.navV a:hover {
      color: #ccc;
      background: #55b;
    }

Since the font, padding and borders have been seriously adjusted, the menu bar width and content margin must be adjusted. A little experimentation yields:

  1. #navVd.navV {
      width:160px;
    }
  2. #content {
      margin-left:180px;
    }

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

Flyright arrows

The same arrow images will be used for the flyright arrows that were used in the fourth horizontal tutorial. And again, remove the greater-than (>) symbols from the menu item text, add the "flyright" class reference to the appropriate menu items, and add the following CSS rules:

  1. #navVd.navV a.flyright {
      padding-right: 24px;
      background:#77d url('arrow_r_norm.png') no-repeat right center;
    }
  2. #navVd.navV a:hover.flyright {
      background:#55b url('arrow_r_hov.png') no-repeat right center;
    }

At this point the vertical 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 vertical flyright navigation bar.

A complete vertical menu style sheet

Since the styling of the vertical menu is complete, now is a good time to remove the bloat from the document header and create a stand-along vertical-menu style sheet.

  • The added general layout style have been combined with those previously defined and incorporated into tutLayout3.css, which can be downloaded here.
  • No further changes were made to the navHd styles, so the example page will continue to use tutNavH4.css.
  • The added navVd styles have been combined with those previously defined and incorporated into tutNavV2.css, which can be downloaded here.
  • And all three style sheets have been linked into the document in the header, after the link for default.css.

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

Next

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

Vertical:  V-1  V-2  V-3  [V-4]  V-5  next