Create the background images

To provide more sophisticated menu styling, the horizontal menu on this site needs six background images, each 300 pixels wide by 28 pixels high:

  • no arrow, normal
  • no arrow, hover
  • down arrow, normal
  • down arrow, hover
  • right arrow, normal
  • right arrow, hover

Download these images here.

The width (300 pixels) is chosen to be wider than the widest menu item, and it doesn't hurt to be a little extreme and make it overly wide. The height is chosen to accommodate the desired elements in the menu items:

  • height of the text
  • height of the arrows
  • height of the rounded hover rectangles with a little vertical padding for the text
  • some vertical padding outside of the rounded hover rectangles

Sliding Doors

Since CSS and HTML do not provide a means of stretching an image to fit the background of an element, these menus employ a variation on the Sliding Doors technique pioneered by Douglas Bowman. It takes advantage of the fact that when a background image is wider or taller than the containing element, the browser truncates the image rather than stretch it. For example, look at the three images below:

The <a> element is contained within the <li> element, and since the <a> element has a fully opaque background, it hides much of the background displayed by the <li> element. The only place the <li> element is visible is where it contains a border or padding, and in those areas it "peeks" around the <a> element.

The third and lowest image above is governed by the following CSS rules:

  1. li {
      background:#77d url('menu_d_hov.png') no-repeat left top;
      padding:0 0 0 12px;
    }
  2. a {
      padding-right: 30px;
      background:#55b url('menu_d_hov.png') no-repeat right top;
    }

Both use the "down arrow, hover" image, but the <li> element positions the image on the left so extra image pixels are truncated on the right, while the <a> element positions it on the right so that extra image pixels are truncated on the left. And since the <li> element has 12 pixels of padding on the left, 12 pixels of its background, the first 12 pixels on the left, peek around the <a> element. The two images combine into what appears to be a single stretched image. To illustrate this:

  • In the first image above, the <li> element background has been overridden to a flat gray color.
  • In the second image above, the <a> element background has been overridden to a flat gray color.
  • In the third image above, the two images combine to give the appearance of a single image that exactly matches the width of the containing <li> element.

But other than overriding the background to gray in two of the images, all three <li><a></a></li> elements are identical.

Also note that 30 pixels of right padding were added to the <a> elements to make room for the arrow. Without it the right end of the text would overlap the arrow and/or the rounded hover rectangles. Furthermore, care should be taken to set up the CSS rules so this padding is not added to menu items that do not have down or right arrows. For them, only a small amount of right padding is needed in the <a> element so the text clears the inner, rounded-corner hover rectangle.

Coding the CSS for cool backgrounds

The following styles were added or modified in tutNavH2.css:

  1. #navHd.navH, #navHd.navH ul {
      font-size:small;
      background:#77d url('menu_n_norm.png') repeat left top;
    }

Use a smaller font that will fit better in the space provided by the background images. And use the basic image, with no arrows or hover, for the background menu bar and the <ul> elements; and set the background image to repeat in both x and y.

  1. #navHd.navH li {
      line-height:26px;
      background:#77d url('menu_n_norm.png') no-repeat left top;
      border-top: 1px solid #8080ff;
      border-right: 1px solid #000000;
      border-bottom: 1px solid #181830;
      border-left: 1px solid #ddd;
      padding:0 0 0 12px;
    }

Set the line height to the height of the image minus the top and bottom border heights (28 - 2). Set the background image with no repeat, and positioned to the left. Include top and bottom borders to prevent the gap problem in IE 6, but set their colors to match the top and bottom colors of the background image so they are not apparent. Left and right borders are added for cosmetic reasons. Add 12 pixels of left padding as described in the Sliding Doors section of this page.

  1. #navHd.navH a {
      padding:0px 10px 0px 0px;
      background:#77d url('menu_n_norm.png') no-repeat right top;
    }

Set 10 pixels of right padding to provide some space between the text and the right edge of the menu item. And add the background image positioned to the right.

The next step is to set background images for all the dropdown, flyright and hover situations:

  1. #navHd.navH li:hover {
      background:#77d url('menu_n_hov.png') no-repeat left top;
    }
  2. #navHd.navH li:hover > a {
      background:#55b url('menu_n_hov.png') no-repeat right top;
    }
  3. #navHd.navH li:hover > a.dropdown {
      background:#55b url('menu_d_hov.png') no-repeat right top;
    }
  4. #navHd.navH li:hover > a.flyright {
      background:#55b url('menu_r_hov.png') no-repeat right top;
    }
  5. #navHd.navH a:hover {
      background:#55b url('menu_n_hov.png') no-repeat right top;
    }
  6. #navHd.navH a.dropdown {
      padding-right: 30px;
      background:#77d url('menu_d_norm.png') no-repeat right top;
    }
  7. #navHd.navH a:hover.dropdown {
      background:#55b url('menu_d_hov.png') no-repeat right top;
    }
  8. #navHd.navH a.flyright {
      padding-right: 30px;
      background:#77d url('menu_r_norm.png') no-repeat right top;
    }
  9. #navHd.navH a:hover.flyright {
      background:#55b url('menu_r_hov.png') no-repeat right top;
    }

Also, note the 30 pixels of padding in the <a> elements of the dropdown and flyright classes, as described in the Sliding Doors section of this page.

Finally, since the left padding if the <li> elements has been changed, the left margins of descendent <ul> elements must be adjusted for proper positioning of the submenus, and to eliminate IE 6 & 7 dead-space gap problems:

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

Style sheets

Again, no general layout styles were added or modified after offloading to tutLayout1.css, so that style sheet remains unchanged. Furthermore, since most of the changes described in this step are really just changes to the background styling, they've been consolidated with the styles from tutNavH2.css and incorporated into tutNavH3.css, which can be downloaded here. As before, both style sheets have been linked into the document in the header, after the link for default.css.

Here is the finished page using tutNavH3.css: example page.

Conclusion: Horizontal Menu Bar

This horizontal menu bar is quite robust and can use simple background color formatting, or sophisticated background images. In fact, the same document can easily be changed from one to the other by merely changing the style sheet link in the header from tutNavH3.css to tutNavH2.css. With a little creativity one can easily mix the two stylistic elements, perhaps use background images for the main menu, and simpler background colors for the submenus. In fact, the vertical menu bar on this web site does exactly the opposite. Since the foreground for the top menu items are images of book covers, the background styling is simple borders and background colors, while the submenus employ the background images described on this page.

Next

It's time for the Vertical Menu Tutorials.

Horizontal: H-1 H-2 H-3 H-4 [H-5] Vertical