Sites from Scratch

Navigation

Introduction

Navigation is one of the most important aspects of a web site. Can the users find (and get to) what they want easily? That is the best question to answer for your web site

This article shows a few different methods of creating basic site navigation in the form of a menu

Open the XHTML page and the CSS file from our last article: More Simple Layouts

Navigation

Most menus are a list of items (links) without an easily defined pattern. This is easy to code for in XHTML, we just use a list. There are two types of list available to us in XHTML, ordered and unordered. We'll be using an unordered list for our navigation, which is represented by the ul element. Inside your nav div, remove the filler text and add opening and closing tags for an unordered list

Each item in a list must be designated separately. We do this with li elements. These are used for both ordered and unordered lists. Add 5 basic items inside your list like this: <li>Item 1</li>; <li>Item 2</li> etc. The code for your nav div should now look like Figure 1

Figure 1

  1. <div id="nav">
  2. <ul>
  3. <li>Item 1</li>
  4. <li>Item 2</li>
  5. <li>Item 3</li>
  6. <li>Item 4</li>
  7. <li>Item 5</li>
  8. </ul>
  9. </div>
  10.  
  11. Download this code: 05-fig01.txt

Look at your site and you'll see how an unordered list is laid out by your browsers's defaults. This brings us to our first noticeable divergence of interpretation by differing browsers. Not in the layout of the list itself, but in the way the background of the nav div is displayed. If you are using a modern browser you will note that the list sticks out of the box made by the background of the div and hangs over the content div a little. This is because we specified a height of 30 pixels for the nav div in the A Simple Layout article. Some older browsers, most noticeably Internet Explorer for Windows, will expand the div to accomodate the content, regardless of the height restriction placed by the CSS rule. This is incorrect. If you choose to limit the height of an element and it looks bad, then that is a fault in the design, not the code. Remove the height property-value pair and modern browsers will expand the div automatically. You can comment out the rule by replacing the property-value pair with /* height: 30px; */. There are a number of modern browsers available for free. A few of the more prominent are:

Ideally, you should test your sites in the latest version of one of these before cross-checking against older browsers such as Internet Explorer for discrepancies in interpretion. Visual Net Applications recommends Firefox

That brief, but important, diversion over, we return to our lesson on navigation. Although, an unordered list is the most suitable XHTML element for a menu, there are some features of the list which we do not require. Most obvious of these is the bullet points. By adding a #nav ul rule to our CSS file with a property-value pair of list-style-type: none;, we remove the display of the bullets

Now we have the structure for a pretty basic menu, but it doesn't fit in with our design. We want a horizontal menu, rather than a vertical one. This is easily changed by adding a new rule specific to the the li elements of our list, #nav ul li, with another new property-value pair. The display property has three commonly used values - none, inline and block. Most XHTML elements are either inline or block by default, the majority being the latter. An XHTML list defaults to a display: block; setting, so we want to countermand that by giving the list items a value of inline. Your list items will now follow each other in a neat line

To see the differences here better, give the ul element and the li elements background colours that differ from each other and from the background of the nav div

The list doesn't butt up against the side of the nav div like the filler text did. This is due to some more of those browser default interpretations - each browser adds margins and padding to the list so that it will indent nicely in normal use. However, those defaults aren't effective for our menu, so we'll remove them - just like we did for the body element in our first CSS rule. Add margin and padding of 0 to the #nav ul rule

If you want to see the defaults of your browser in action, experiment with the three property we've just added - display, margin and padding. The relevant code should look like Figure 2 when you are ready to move on

Figure 2

  1. #nav {
  2. background-color: #EAEBC1;
  3. height: 30px;
  4. margin: 10px 0;
  5. }
  6.  
  7. #nav ul {
  8. list-style-type: none;
  9. margin: 0;
  10. padding: 0;
  11. }
  12.  
  13. #nav ul li {
  14. display: inline;
  15. }
  16.  
  17. Download this code: 05-fig02.txt

Links

Links are made from anchor, or a, elements. Each one requires a href attribute and a title attribute. The former is for the URI, such as http://example.com for a site or mailto:scratch@vna.com.au for an email address. The title is for an identifying phrase or word to further describe the location of the link. Check out this code for an example link: <a href="http://vna.com.au" title="Visual Net Applications site">vna.com.au</a>

Add hyperlinks to each of your list items, but simply put a # symbol as the value for the href attribute. The hash will ensure that the link merely refreshes the current page. Keep the filler text as the link and you can also use it for the title attribute - ie <a href="#" title="Item 1">Item 1</a>. The relevant XHTML should look like Figure 3

Figure 3

  1. <div id="nav">
  2. <ul>
  3. <li>
  4. <a href="#" title="Item 1">Item 1</a>
  5. </li>
  6. <li>
  7. <a href="#" title="Item 2">Item 2</a>
  8. </li>
  9. <li>
  10. <a href="#" title="Item 3">Item 3</a>
  11. </li>
  12. <li>
  13. <a href="#" title="Item 4">Item 4</a>
  14. </li>
  15. <li>
  16. <a href="#" title="Item 5">Item 5</a>
  17. </li>
  18. </ul>
  19. </div>
  20.  
  21. Download this code: 05-fig03.txt

Add a #nav ul li a rule with a background colour of #22BF86 and a font-weight of bold. Font-weight, fairly obviously, defines the weight of the font.

There are a number of effects that we can apply to links via CSS. This is because links have several states: link, visited, hover, active and focus. Each of these states has a corresponding pseudo-class in CSS. These can be used by appending them to the element with a colon, ie #nav ul li a:link. Make such rules for each state, in the same order as they are listed at the start of this paragraph. The order is important as the property-value pairs within the rules can override each other depending on order

Traditionally, hyperlinks are underlined to allow them to stand out amongst body text. Your browser default is almost certainly set to show links as underlined, but the underline isn't really necessary in navigation like ours so we can counter that with a few simple rules. Add text-decoration: none; to the #nav ul li a:link rule and to the #nav ul li a:visited rule. Typically on a menu, most people choose not to distinguish between links which have been visited and links which haven't

However, distinguishing a link upon hover can be quite important, users are accustomed to some kind of effect and become confused if there isn't one. We'll ensure an effect by adding text-decoration: underline; to the #nav ul li a:hover rule. We'll also add it to the #nav ul li a:active rule as the active state is only valid during the time it takes from clicking the link to move to the new page. You can see this in action by adding a text colour or similar obvious effect. If you try it you'll also realise that it could quickly become annoying, due to its swiftness

If that is the case, why add a rule for active at all? Two reasons: so you learn about it, and because Internet Explorer for Windows uses the active state for the same purpose as the focus state but ignores focus. We'll add the same text-decoration value to #nav ul li a:focus as it offers the same functionality by tabbing on a keyboard as hover does for a mouse

Our CSS code for the different link states is fairly repetitive, so this is a prime chance to optimise that code a little. We can select multiple elements to give the same values to by using a comma to separate them - ie #nav ul li a:link, #nav ul li a:visited {text-decoration: none;}. Group the link and visited states together, and the hover, active, and focus states together

In order to improve the spacing of our menu, we'll add padding-top: 10px; to our #nav rule and margin: 5px; to our list items (#nav ul li). And we're done. Figure 4 shows you the latest changes to the CSS file

Figure 4

  1. #nav {
  2. background-color: #EAEBC1;
  3. height: 30px;
  4. margin: 10px 0;
  5. padding-top: 10px;
  6. }
  7.  
  8. #nav ul {
  9. list-style-type: none;
  10. margin: 0;
  11. padding: 0;
  12. }
  13.  
  14. #nav ul li {
  15. display: inline;
  16. margin: 5px;
  17. }
  18.  
  19. #nav ul li a {
  20. color: #22BF86;
  21. font-weight: bold;
  22. }
  23.  
  24. #nav ul li a:link,
  25. #nav ul li a:visited {
  26. text-decoration: none;
  27. }
  28.  
  29. #nav ul li a:hover,
  30. #nav ul li a:active,
  31. #nav ul li a:focus {
  32. text-decoration: underline;
  33. }
  34.  
  35. Download this code: 05-fig04.txt

Your site should look like this Navigation example

This is currently the last article in the series, but check the Table of Contents regularly because there are plenty more to come!