Background images and sliding doors

The vertical menu bar items use the same background images that were used in horizontal tutorial 5, and they can be downloaded there.

It will also employ the same Sliding Doors technique.

Coding the CSS for cool backgrounds

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

  1. #navVd.navV, #navVd.navV ul {
  2. #navVd.navV li {
      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;
  3. #navVd.navV a {
      padding:0px 10px 0px 0px;
      background:#77d url('menu_n_norm.png') no-repeat right top;
  4. #navVd.navV a:hover {
      background:#55b url('menu_n_hov.png') no-repeat right top;
  5. #navVd.navV a.flyright {
      padding-right: 30px;
      background:#77d url('menu_r_norm.png') no-repeat right top;
  6. #navVd.navV a:hover.flyright {
      background:#55b url('menu_r_hov.png') no-repeat right top;
  7. #navVd.navV li:hover {
      background:#77d url('menu_n_hov.png') no-repeat left top;
  8. #navVd.navV li:hover > a {
      background:#55b url('menu_n_hov.png') no-repeat right top;
  9. #navVd.navV li:hover > a.flyright {
      background:#55b url('menu_r_hov.png') no-repeat right top;

These are identical to the styles added to the horizontal styling, though no dropdown class is required.

Finally, since the left padding of 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. * html #navVd.navV 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 tutNavV2.css and incorporated into tutNavV3.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 tutNavV3.css: example page.

Conclusion: Vertical Menu Bar

This vertical 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 tutNavV3.css to tutNavV2.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.


It's time for the Animation Tutorials.

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