Design Lessons

Lesson 11

Web Design Lesson Eleven
Creating a Navigation Scheme

old compass

This is the main page for Web Design: Lessons. Hover over the button below, and the menu for the Lessons pages will appear.

Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.

If you missed the earlier lessons, you should start at the beginning.

html icon

Creating a Navigation Scheme

Every Web site worth its salt has some sort of navigation scheme — a set of styled (or, too often, badly styled, or even unstyled) links that lead to the other pages in the site. This site has a number of those links. in both sidebar columns, above the main content, and at the bottom of the page (the footer, a concept we’ll explore later). You’re going to create a very basic list right now.

Copy and paste this into your home page, underneath the single introductory sentence:

<h2>Navigation Links</h2>
<ul id="navlist">
   <li><a href="index.html" title="Home">Home</a></li>
   <li><a href="about.html" title="About Me">About Me</a></li>
   <li><a href="links.html" title="Links and Credits">Links and Credits</a></li>
   <li><a href="contact.html" title="Contact Me">Contact Me</a></li>
</ul>

We’ve added something new: an ID on the UL called #navlist.

More about classes and IDs.

Save your home page and refresh your browser. If the links appear as they should, check them by clicking on each link. The appropriate pages should appear in your browser window.

It should look something like this (the links below are bogus, and they won’t be orange on your page):

Does it work? If it does, copy it over on all the other pages, as the first thing in your page under the opening body tag.

Now every page has a navigation scheme. That is a key element to a functioning Web site.

css icon

Styling Your Navigation Links

As cool as that navigation scheme is, it’s not particularly attractive. It’s just a list of textual links in a vertical column. Let’s change that around.

(This section owes a lot to the Listamatic compendium of navigational lists. You can experiment with them yourself as you like. I also received a valuable assist from my pal Rayzur on SitePoint, who showed me a way to make the code more efficient and in line with CSS best practices.)

Your first choice revolves around leaving the links in a vertical column, or somehow forcing them to display horizontally. Because your page doesn’t have columns, let’s have the links going across — horizontally.

How do we do that?

Here’s the CSS styling to make the list horizontal:

#navlist {
    margin: 20px;
    padding: 0;
}

#navlist li {
   display: inline;
}

Add this to your CSS stylesheet. Save the file and refresh your browser.

Now the links should display horizontally. The display: inline makes it happen, by transforming the list items from block to inline. We’ve also added a 20px margin to your overall #navlist element, giving the whole thing a bit of room to breathe.

More about block and inline styling.

Now let’s get rid of the bullets, to give it a cleaner design. Add this line to your #navlist selector:

list-style-type: none;

Now that CSS selector should look like:

#navlist {
   margin: 20px;
   padding: 0;
   list-style-type: none;
}

And let’s separate the links a bit with some padding:

padding-right: 20px;

making your navigation selector look like:

#navlist li {
   display: inline;
   padding-right: 20px;
}

Here’s what it should look like.

(Because of this site’s structure, I can’t properly display the navigation menu on this page.)

Notice how they line up horizontally, and the spacing between the links.

But we’re just beginning to style these links!

Let’s change the link colors to something we like rather than letting the browser make that decision.

We’re going to change each of the four basic link states:

  • link (the default state)
  • visited (what the link looks like after you’ve visited the site)
  • hover (the way the link appears when you hold the mouse cursor over the link)
  • active (what the link looks like as it’s being clicked)

More about adding colors to links, and the proper order of the links in your stylesheet, can be found at the link below:

More about styling links.

We’re going to use the same #navlist ID to style our links.

(Remember, most people expect certain things from links: they should be blue when unvisited and purple when visited, and they should be underlined. We don’t have to stick to those basic principles, but we need to ensure that links look like links, and are something the user can click to go somewhere else.)

Let’s make our links appear a select shade of green on their initial appearance. Remember, we’re getting our colors from December.com’s Hex Hub.

In your stylesheet, add this underneath your navigation code:

#navlist a:link, #navlist a:visited {
   color: #bced91;
}

What exactly does this do? It tells your browser to style the links identified in the navlist element as green, and only the default (a:link) and visited (a:visited) states are so styled.

Okay so far, but when you hover over them, the default color absolutely doesn’t go with that green. So, let’s use, say, a darker green for our hover state. Add this under the code you just added to your stylesheet:

#navlist a:hover {
   color: #006400;
}

(I didn’t change the active state. Often, Web designers don’t bother with changing the active color of the link. This isn’t necessarily a good thing, but for now we’re just going to let the active state remain in its default.)

Here’s what it should look like.

(That default green is very light. I know. I have a plan. Bear with me.)

Although it’s very cool that we can change the link colors around, this doesn’t look all that different from regular links. Can’t we do more?

Yes, we can. Let’s move towards turning these links from text links into button links. Very cool.

As I’m sourcing this from Russ Weakley’s basic link creation tutorial, I’ll let Weakley describe how this effect is created:

Use display: inline; and list-style-type: none; to set a basic horizontal list. Use padding and background color on the “a” element to achieve colored blocks. Use a different background color on the a:hover to achieve a rollover effect.

Um, say what? Let’s break that down.

We’ve used display: inline; to make the list horizontal. We’ve added list-style-type: none; to get rid of the bullets. We’ve used padding to separate the links.

Now we’re going to use more padding and background colors to create "colored blocks" that look like bullets.

We’re going to get rid of some old padding, and create some new padding.

Delete

padding-right: 20px;

from your #navlist li element.

Now add this element, separate from the other navigation coding, just above the #navlist a:link, #navlist a:visited selector:

#navlist a { 
   padding: 3px 10px; 
}

We’ve added 3px of padding to the top and bottom of the navigation links, and 10px to the right and left sides.

More about margins and padding.

Not that you can see much difference, yet … That’s about to change.

Add this background color to the #navlist a element:

background-color: #006400;

making the element now appear as:

#navlist a { 
   padding: 6px 20px;
   background: #006400;
   border: 2px inset #bced91;
}

(Did you notice that we’re using the same color for the background of the default and visited states as we used on the hover links?)

And add this background color to the #navlist a:hover element:

background-color: #bced91;

making that element now:

#navlist a:hover {
   color: #006400;
   background-color: #bced91;
}

You guessed it. By using the same color for the background of the hover state as we used on the default and visited links, we’re just swapping the two colors around. Let’s see how it works:

Here’s what it should look like.

Hey, we’ve got buttons!

Let’s make a few more tweaks to really light this thing up.

First, let’s increase the font size and the padding to make the buttons a bit larger and more prominent.

Change the old padding value in #navlist a to this:

padding: 6px 20px;

Basically, we’re doubling the padding.

And let’s increase the font size:

Add this to the #navigation li element:

font-size: 1.25em;

Bigger without being pushy.

And last, let’s use some border stylings to give these buttons that 3D, "clickable" appearance:

Add this to the #navlist a:link, #navlist a:visited element:

border: 1px inset #bced91;

And add this to the #navlist a:hover element:

border: 1px outset #006400;

More about borders.

Check it out:

Here’s what it should look like.

Now you get to experiment with colors and borders for a while, to make these nav buttons match your pages’ style (anyone notice that on the example pages, that green looks really awful?!?). Make changes carefully, and test them one at a time. Experiment with different border effects. Play with different fonts. Have some fun.

On to the next page!

Previous Page

Next Page