1. Stylizing a Navigational Menu Web Design Section 6-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

2. Objectives The Student will: Use CSS to stylize an HTML list so that it appears as a navigational menu.

3. What do we need to do? We have a list that looks like this: We want this: What needs to change to get to that?

4. Setting CSS code for navList In the html you gave the unordered list an id of navList In the CSS code we will define attributes for list items (li) in the navList #navList li { }

5. Setting the Width We will be setting the width of each item in the table to be a fixed value. 1 em is defined as the width of the character X in the current font. Set the width to 8em (the width of XXXXXXXX in the current font) #navList li { width: 8em; } The list still looks like this:

6. Adding a Border A border will make the list item appear as boxes. #navList li { width: 8em; border: 2px solid black; } The list is now:

7. Centering the Text The “buttons” will look better is the text is centered: #navList li { width: 8em; border: 2px solid black; text-align: center; } The list is now:

8. Fill the Box with Color Add a background color to the to boxes: #navList li { width: 8em; border: 2px solid black; text-align: center; background: #000099; } The list is now:

9. Line up the List Items To line up the list items you need to tell the CSS code to “float” them to the left. CSS will continue to put the buttons next to each other as long as they fit across the screen. At the same time we will pad the items to add a bit of space: #navList li { width: 8em; border: 2px solid black; text-align: center; background: #000099; float: left; padding: 0.25em; }

10. Changing the Font To change the font we need to change the CSS code for an anchor (a) reference. Change the color to White and the font style to bold and remove the underlines: #navList a { color: #ffffff; font-weight: bold; text-decoration: none; }

11. Changing the style when the mouse is on an item To change the style when the mouse is on top of anchor you set a style for “a:hover” #navList a:hover { color: #000099; font-weight: bold; text-decoration: underline; background: #ffffff; }

12. Summary CSS Styles can be used to change a simple unordered list into a Navigation Menu. Change the styles to make your navigation menu fit with your website.

13. Rest of Today Download the instructions for Homework 6-3 from the Hancock Webpage (in the homework section) You must show me your navagation system tomorrow.