Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Exercise: Navbars

DES300 Web Design I

Exercise: Navbars

Assignment

Create two versions of a navigation menu ("navbar") —one vertcal, and one horizontal.

Menu 1: Vertical

The first navbar will be vertical and look like this:

1. Launch Dreamweaver and create a new html document. Save it as yourName_navbars.html.
2. In the body, create an unordered list with the following items: Home, What's New, About Us, FAQ , and Contact. Highlight each item in turn and turn it into a 'dummy' link (<a href="#">). Surround the list with a <div> tag called "navigation." This will become the navigation menu. It should look something like this:

<div id="navigation">

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">What's New</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>

</ul>

</div>

Note the use of <a href="#">. These are dummy links, placeholders. They look and behave like links, but they don't go anywhere. To make this a working navigation menu, you'd have to replace the # signs with actual urls.

 

3. In the head portion of your document add the <style> tags:

<style type="text/css">
<!--

-->

</style>

 

4. Copy the CSS code below and put it into the head of your html document between the comment tags (<!-- all style rules go between the comment tags-->):

#navigation{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: bold;
width: 8em;
border-right: 1px solid #333;

}

This first style rule sets the font family, size and weight for all of the navigation menu items. Of course, you can alter these to suit your own needs. The width sets the width of the navigation menu column; by using ems the menu is expandable. If you use pixels, the menu column will remain a fixed width, but the text will get bigger and perhaps break-out of their boxes. The border is optional, just a design element. Now add the following rules:

#navigation ul {
list-style: none;
margin: 0;
padding: 0;

}

 

#navigation ul li {
margin: 0;

}

Setting the list-style to none removes the bullets in the list. Then we remove the default margins and padding. Next a big style rule:

#navigation ul li a {
display: block;
padding: .2em .2em .2em .4em;
border-top: 1px solid #003;
border-left: 1px solid #369;
border-right: 1px solid #69C;
border-bottom: 1px solid #369;
background-color: #036;
color: #fff;
text-decoration: none;
width: 100%;

}

The key line here is display: block. That particular property makes the area around the words "clickable," not just the words themselves. As a result, they look and behave more like buttons. Setting the text-decoration to none removes the default underlines on the links. Setting the width to 100% ensures that each menu item expands to the width of the menu column. Everything else determines visual style—colors, borders, and padding. All can br modified to suit your design (the borders especially are optional). But we're not done quite yet:

html>body #navigation ul li a {
width: auto;

}

This line is a hack to make sure our menus format properly in Internet Explorer. Finally, we add the hover pseudo-style for rollovers. This will change the menu item colors when moused-over:

#navigation ul li a:hover {
background-color: #69F;

}

Once again, color choices can be changed to fit your design.

 

5. Save it and test it. Does it work?
6. Customize. Try altering the colors, fonts, sizes, etc.

Menu 2: Horizontal

The second navbar will look like this:

1. Make a new list below your first list/navbar. You can use the same code as in Menu 1 above, except change the ID name in the <div> tag to "navigation2." It should look like this:

<div id="navigation2">

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">What's New</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>

</ul>

</div>

2. Add the following code to the CSS section:

#navigation2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: bold;
padding: 0;

}

 

#navigation2 ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
background-color: #036;
float:left; /* This is needed to keep the list element from collapsing */
}

So far it's very similar to the first menu. However, there are a couple significant differences. First of all, the width of this menu is 100% because we want it to stretch across the page. We've also added a float property; this does not appear to do anything, but it's important for it keeps the list from collapsing on itself when finished. Now add the following rule:

#navigation2 ul li {
float:left;
margin: 0;
}

This is the key; the float:left causes each menu item to line up horizontally, rather than vertically, which is normal for a list. Now let's style the links:

#navigation2 ul li a {
display: block;
margin: 0;
padding: 0 2em;
line-height: 1.8em;
color: #fff;
text-decoration: none;
}

 

#navigation2 ul li a:hover {
background-color: #69F;
}

Once again, we use the display:block to make the area around the list item "cliackable." We use line-height to give the navbar thickness (height). Colors and padding amounts can be adjusted according to your design.

 

3. Don't worry if it looks funny in Dreamweaver; it should work in a browser. Save it and test it. Does it work?
4. Customize. Try altering the colors, fonts, sizes, etc.

Deliverables

Upon completion, give me a copy of your html file.

Deadline

Week 9: Due, beginning of class.

Class schedule

Syllabus

Student resource index