UNIT 5 > MODULE 2

Lesson 2: Stylizing a Navigational Menu

Overview

In an earlier lesson, you created a navigational menu for your website and added it to the top of each page within your site. Since the navigational menu was created as an unordered list, it probably still looks like a list, and is not particularly attractive.

In the previous lesson, you linked an external style sheet to each of the pages in your site. Now, in order to stylize your navigational menu on all pages so that it looks more like a menu than a list, all you have to do is make a few edits to your external style sheet.

Learner Outcomes

At the completion of this exercise:

Creating a Horizontal Menu

When you created your navigational menu, you should have given it a unique id (e.g., <ul id="navList">). To change the style of this particular list, you simply need to use this id in your style declarations. Here's an example of how we might stylize our menu as a horizontal menu:

  #navList { 
     list-style-type: none;
     margin-left: 0;
   }
  #navList li { 
     float: left;
     width: 8em;
     border: 2px solid black;
     text-align: center;
     padding: 0.25em;
     background: #FFFF99;
     font-weight: bold;
  }
  #navList a { 
     color: #990066;
     text-decoration: none;
  }
  #navList a:hover { 
     /* Change appearance when user points with mouse */
     color: #006600;
     font-weight: bold;
     text-decoration: underline;
  }
  #navList a:focus, #navList a:active { 
     /* Change appearance when user tabs with keyboard */
     color: #006600;
     font-weight: bold;
     text-decoration: underline;
  }

The above CSS will cause each list item to "float" to the left of the preceding list item, creating the appearance of a row of horizontal buttons. One final step to make this menu work is to add clear: both to the style for whatever element immediately follows the list. For example, if the list is positioned imnmediately prior to your top-level (H1) heading, you would add clear: both to the style declaration for H1. This CSS property clears, or cancels, the float, forcing whatever follows to start on a new line.

Activities

  1. Try stylizing your own navigational menu using the above example CSS. As a class, discuss each of the the style declarations in this example. What does each declaration do? What happens to your menu if you comment out each declaration one-at-a-time by surrounding it in with /* and */ ?
  2. The above example results in a horizontal menu. What one CSS property could you add to the sample code that would force the list to display as a vertical menu?
  3. Give your menus a different look and feel than the example by modifying the example style sheet. Try to make your menus look as different from the example as possible. See the Resources/Online documents section below for further examples of menus that are stylized using CSS.

Resources/Online Documents

All done?

Show your instructor your completed website. Be prepared to discuss which CSS codes you've used to attain your menu's unique look and feel.