Hour 17. Using CSS to Design Navigation
What You’ll Learn in This Hour:
How navigation lists differ from regular lists
How to create vertical navigation with CSS
How to create horizontal navigation with CSS
In the previous lesson, you learned how margins, padding, and alignment styles can be applied to different types of HTML lists, helping you produce some powerful design elements purely in HTML and CSS. In this hour, you learn a few of the many ways to use lists as vertical or horizontal navigation, including how to use lists to create drop-down menus.
The methods explained in this chapter represent a very small subset of the numerous and varied navigation methods you can create using lists. However, the concepts are all similar; different results come from your own creativity and application of these basic concepts. To help you get your creative juices flowing, I provide pointers to other examples of CSS-based navigation at the end of this chapter.
How Navigation Lists Differ from Regular Lists
When we talk about using lists to create navigation elements, we really mean using CSS to display content in the way website visitors expect navigation to look—in short, different from simple bulleted or numbered lists. Although it is true that a set of navigation elements is essentially a list of links, those links are typically displayed in a way that makes it clear that users should interact with the content:
The user’s mouse cursor changes to indicate that the element is clickable.
The area around the element changes appearance when the mouse hovers over it.
The content area is visually set apart from regular text.
Older methods of creating navigation tended to rely on images—such as graphics with beveled edges and the use of contrasting colors for backgrounds and text—plus client-side programming with JavaScript to handle image swapping based on mouse actions. But using pure CSS to create navigation from list elements produces a more usable, flexible, and search engine-friendly display that is accessible by users using all manner and sorts of devices.
Regardless of the layout of your navigational elements—horizontal or vertical—this hour discusses two levels of navigation: primary and secondary. Primary navigation takes users to the introductory pages of main sections of your site; secondary navigation reflects those pages within a certain section.
Creating Vertical Navigation with CSS
Depending on your site architecture—both the display template you have created and the manner in which you have categorized the information in the site—you might find yourself using vertical navigation for either primary navigation or secondary navigation.
For example, suppose you have created a website for your company with the primary sections About Us, Products, Support, and Press. Within the primary About Us section, you might have several other pages, such as Mission, History, Executive Team, and Contact Us—these other pages are the secondary navigation within the primary About Us section.
Listing 17.1 sets up a basic secondary page with vertical navigation in the side of the page and content in the middle of the page. The links in the side and the links in the content area of the page are basic HTML list elements.
This listing and the example in Figure 17.1 provides a starting point for showing you how CSS enables you to transform two similar HTML structures into two different visual displays (and thus two different contexts).
LISTING 17.1 Basic Page with Vertical Navigation in a List
<!DOCTYPE html>
<html lang="en">
<head>
<title>About Us</title>
<style type="text/css">
body {
font: 12pt Verdana, Arial, Georgia, sans-serif;
}
nav {
width:150px;
float:left;
margin-top:12px;
margin-right:18px;
}
section {
width:550px;
float:left;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Executive Team</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<section>
<header>
<h1>About Us</h1>
</header>
<p>On the introductory pages of main sections, it can be useful
to repeat the secondary navigation and provide more context,
such as:</p>
<ul>
<li><a href="#">Mission</a>: Learn more about our corporate
mission and philanthropic efforts.</li>
<li><a href="#">History</a>: Read about our corporate history
and learn how we grew to become the largest widget maker
in the country.</li>
<li><a href="#">Executive Team</a>: Our team of executives makes
the company run like a well-oiled machine (also useful for
making widgets).</li>
<li><a href="#">Contact Us</a>: Here you can find multiple
methods for contacting us (and we really do care what you
have to say).</li>
</ul>
</section>
</body>
</html>
The contents of this page are set up in two sections: a <nav> element containing navigation, and a single <section> element containing the primary text of the page. The only styles assigned to anything in this basic page are the width, margin, and float values associated with each element. No styles have been applied to the list elements.
To differentiate between the links present in the list in the content area and the links present in the list in the side navigation, add the following styles to the stylesheet:
nav a {
text-decoration: none;
}
section a {
text-decoration: none;
font-weight: bold;
}
These styles simply say that all <a> links in the <nav> have no underline, and all <a> links in the <section> have no underline and are bold. Figure 17.2 shows the difference.
But to really make the side navigation list look like something special, you have to dig deeper into the stylesheet.
Styling the Single-Level Vertical Navigation
The goal with this particular set of navigation elements is simply to present them as a block of links without bullets and with background and text colors that change depending on their link state (regular link, visited link, hovering over the link, or activated link). The first step in the process is already complete: separating the navigation from the content. We’ve done that by putting the navigation in a <nav> element.
Next, you need to modify the <ul> that defines the link within the <nav> element. Let’s take away the list indicator and ensure that there is no extra margin or padding besides the top margin. That top margin is used to line up the top of the navigation with the top of the “About Us” header text in the content area of the page:
nav ul {
list-style: none;
margin: 12px 0px 0px 0px;;
padding: 0px;
}
Because the navigation list items themselves will appear as colored areas, give each list item a bottom border so that some visual separation of the content can occur:
nav li {
border-bottom: 1px solid #ffffff;
}
Now on to building the rest of the list items. The idea is that when the list items simply sit there acting as links, they are a special shade of blue with bold white text (although they are a smaller font size than the body text itself). To achieve that, add the following:
nav li a:link, nav li a:visited {
font-size: 10pt;
font-weight: bold;
display: block;
padding: 3px 0px 3px 3px;
background-color: #628794;
color: #ffffff;
}
All the styles used previously should be familiar to you, except perhaps the use of display: block; in the stylesheet entry. Setting the display property to block ensures that the entire <li> element is in play when a user hovers the mouse over it. Figure 17.3 shows the vertical list menu with these new styles applied to it.
When the user’s mouse hovers over a navigational list element, the idea is for some visual change to takes place so that the user knows the element is clickable. This is akin to how most software menus change color when a user’s cursor hovers over the menu items. In this case, we’ll change the background color of the list item and change the text color of the list item; they’ll be different from the blue and white shown previously.
nav li a:hover, nav li a:active {
font-size: 10pt;
font-weight: bold;
display: block;
padding: 3px 0px 3px 3px;
background-color: #6cac46;
color: #000000;
}
Figure 17.4 shows the results of all the stylistic work so far. A few entries in a stylesheet have transformed the simple list into a visually differentiated menu.
Styling the Multilevel Vertical Navigation
What if your site architecture calls for another level of navigation that you want your users to see at all times? That is represented by nested lists (which you learned about in previous hours) and more stylesheet entries. In this case, assume that there are four navigation elements under the Executive Team link. In the HTML, modify the list as follows:
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Executive Team</a>
<ul>
<li><a href="#">» CEO</a>
<li><a href="#">» CFO</a>
<li><a href="#">» COO</a>
<li><a href="#">» Other Minions</a>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
This code produces a nested list under the Executive Team link (see Figure 17.5). The » HTML entity produces the right-pointing arrows that are displayed before the text in the new links.
The new items appear as block elements within the list, but the hierarchy of information is not visually represented. To add some sort of visual element that identifies these items as subnavigational elements attached to the Executive Team link, modify the stylesheet again to add some indentation.
But before doing that, you want to modify some of the other stylesheet entries as well. In the previous section, we added selectors such as nav ul and nav li, which indicate “all <ul> in the <nav> element” and “all <li> in the <nav> element,” respectively. However, we now have two instances of <ul> and another set of <li> elements with the <nav> element, all of which we want to appear different from the original set.
To ensure that both sets of list items are styled appropriately, make sure that the stylesheet selectors clearly indicate the hierarchy of the lists. To do that, use entries such as nav ul and nav ul li for the first level of lists, and use nav ul ul and nav ul ul li for the second level of lists. Listing 17.2 shows the new version of stylesheet entries and HTML that produces the menu shown in Figure 17.6.
LISTING 17.2 Multilevel Vertical Navigation in a List
<!DOCTYPE html>
<html lang="en">
<head>
<title>About Us</title>
<style type="text/css">
body {
font: 12pt Verdana, Arial, Georgia, sans-serif;
}
nav {
width:150px;
float:left;
margin-top:12px;
margin-right:18px;
}
section {
width:550px;
float:left;
}
nav a {
text-decoration: none;
}
section a {
text-decoration: none;
font-weight: bold;
}
nav ul {
list-style: none;
margin: 12px 0px 0px 0px;
padding: 0px;
}
nav ul li {
border-bottom: 1px solid #ffffff;
}
nav ul li a:link, nav ul li a:visited {
font-size: 10pt;
font-weight: bold;
display: block;
padding: 3px 0px 3px 3px;
background-color: #628794;
color: #ffffff;
}
nav ul li a:hover, nav ul li a:active {
font-size: 10pt;
font-weight: bold;
display: block;
padding: 3px 0px 3px 3px;
background-color: #c6a648;
color: #000000;
}
nav ul ul {
margin: 0px;
padding: 0px;
}
nav ul ul li {
border-bottom: none;
}
nav ul ul li a:link, nav ul ul li a:visited {
font-size: 8pt;
font-weight: bold;
display: block;
padding: 3px 0px 3px 18px;
background-color: #628794;
color: #ffffff;
}
nav ul ul li a:hover, nav ul ul li a:active {
font-size: 8pt;
font-weight: bold;
display: block;
padding: 3px 0px 3px 18px;
background-color: #c6a648;
color: #000000;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Executive Team</a>
<ul>
<li><a href="#">» CEO</a></li>
<li><a href="#">» CFO</a></li>
<li><a href="#">» COO</a></li>
<li><a href="#">» Other Minions</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<section>
<header>
<h1>About Us</h1>
</header>
<p>On the introductory pages of main sections, it can be useful
to repeat the secondary navigation and provide more context,
such as:</p>
<ul>
<li><a href="#">Mission</a>: Learn more about our corporate
mission and philanthropic efforts.</li>
<li><a href="#">History</a>: Read about our corporate history
and learn how we grew to become the largest widget maker
in the country.</li>
<li><a href="#">Executive Team</a>: Our team of executives makes
the company run like a well-oiled machine (also useful for
making widgets).</li>
<li><a href="#">Contact Us</a>: Here you can find multiple
methods for contacting us (and we really do care what you
have to say.</li>
</ul>
</section>
</body>
</html>
The different ways of styling vertical navigation are limited only by your own creativity. You can use colors, margins, padding, background images, and any other valid CSS to produce vertical navigation that is quite flexible and easily modified. If you type “CSS vertical navigation” into your search engine, you will find millions of examples—and they are all based on the simple principles you’ve learned in this hour.
Creating Horizontal Navigation with CSS
The lessons on navigation began with vertical navigation because the concept of converting a list into navigation is easier to grasp when the navigation still looks like a list of items that you might write vertically on a piece of paper, such as with a grocery list. When creating horizontal navigation, you still use HTML list elements, but instead of achieving a vertical display by using the inline value of the display property for both the <ul> and the <li>, use the block value of the display property instead. It really is as simple as that.
Listing 17.3 shows a starting point for a page featuring horizontal navigation. The page contains a <header> element for a logo and navigation and a <section> element for content. Within the <header> element, a <div> containing a logo is floated next to a <nav> element containing the navigational links. The list that appears in the <nav> element has a display property value of inline for both the list and the list items. You can see these elements and their placement in Figure 17.7.
FIGURE 17.7 Creating functional—but not necessarily beautiful—horizontal navigation using inline list elements.
LISTING 17.3 Basic Horizontal Navigation from a List
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACME Widgets LLC</title>
<style type="text/css">
body {
font: 12pt Verdana, Arial, Georgia, sans-serif;
}
header {
width: auto;
}
#logo {
float:left;
}
nav {
float:left;
}
nav ul {
list-style: none;
display: inline;
}
nav li {
display: inline;
}
section {
width: auto;
float: left;
clear: left;
}
section a {
text-decoration: none;
font-weight: bold;
}
</style>
</head>
<body>
<header>
<div id="logo">
<img src="acmewidgets.jpg" alt="ACME Widgets LLC" />
</div>
<nav>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Press</a></li>
</ul>
</nav>
</header>
<section>
<p><strong>ACME Widgets LLC</strong> is the greatest widget-maker
in all the land.</p>
<p>Don't believe us? Read on...</p>
<ul>
<li><a href="#">About Us</a>: We are pretty great.</li>
<li><a href="#">Products</a>: Our products are the best.</li>
<li><a href="#">Support</a>: It is unlikely you will need support,
but we provide it anyway.</li>
<li><a href="#">Press</a>: Read what others are saying (about how
great we are).</li>
</ul>
</section>
</body>
</html>
Modifying the display of this list occurs purely through CSS; the structure of the content within the HTML itself is already set. To achieve the desired display, use the following CSS. First, the <nav> element is modified to be a particular width, to display a background color and border, and to use a top margin of 85 pixels (so that it displays near the bottom of the logo).
nav {
float:left;
margin: 85px 0px 0px 0px;
width: 400px;
background-color: #628794;
border: 1px solid black;
}
The definition for the <ul> remains the same as in Listing 17.3, except for the changes in margin and padding:
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
display: inline;
}
The definition for the <li> remains the same as in Listing 17.3, except that it has been given a line-height value of 1.8em:
nav li {
display: inline;
line-height: 1.8em;
}
The link styles are similar to those used in the vertical navigation; these entries have different padding values, but the colors and font sizes remain the same:
nav ul li a:link, nav ul li a:visited {
font-size: 10pt;
font-weight: bold;
text-decoration: none;
padding: 7px 10px 7px 10px;
background-color: #628794;
color: #ffffff;
}
nav ul li a:hover, nav ul li a:active {
font-size: 10pt;
font-weight: bold;
text-decoration: none;
padding: px 10px 7px 10px;
background-color: #c6a648;
color: #000000;
}
Putting these styles together, you produce the display shown in Figure 17.8.
When the user rolls over the navigation elements, the background and text colors change in the same way they did when the user hovered the mouse over the vertical navigation menu. Also, just as you did with the vertical navigation menu, you can use nested lists to produce drop-down functionality in your horizontal menu. Try it yourself!
Summary
The entire point of this lesson was for you to learn how to use unordered lists to produce horizontal or vertical navigation within your website. By using CSS instead of graphics, you gain more flexibility in both the display and maintenance of your site. Throughout this hour, you learned that, with a few entries in your stylesheet, you can turn plain underlined text links into areas with borders and background colors and other text styles. Additionally, you learned how to present nested lists within menus.
Q&A
Q. Can I use graphics in the navigation menus as a custom list indicator?
A. Yes. You can use graphics within the HTML text of the list item or as background images within the <li> element. You can style your navigation elements just as you style any other list element. The only differences between an HTML unordered list and a CSS-based horizontal or vertical navigation list is that you are calling it that, and you are using the unordered list for a specific purpose outside the body of the text. Along with that, you then style the list to show the user that it is indeed something different—and you can do that with small graphics to accentuate your lists.
Q. Where can I find more examples of what I can do with lists?
A. The last time I checked, typing “CSS navigation” into a search engine returned approximately 44 million results. Here are a few starting places:
A List Apart’s CSS articles, at http://alistapart.com/topic/css
Maxdesign’s CSS Listamatic, at http://css.maxdesign.com.au/listamatic/
Vitaly Friedman’s CSS Showcase, at www.alvit.de/css-showcase/
Workshop
The Workshop contains quiz questions and activities to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows.
Quiz
1. To create a horizontal list, do you use the inline or block display property?
2. When creating list-based navigation, how many levels of nested lists can you use?
3. When creating a navigation list of any type, can the four pseudoclasses for the a selector have the same values?
Answers
1. Horizontal lists use the inline value of display; vertical lists use block.
2. Technically, you can nest your lists as deep as you want to. But from a usability standpoint, there is a limit to the number of levels you want to use to nest your lists. Three levels is typically the limit—more than that, and you run the risk of creating a poorly organized site or simply giving users more options than they need to see at all times.
3. Sure, but then you run the risk of users not realizing that your beautiful menus are indeed menus (because no visual display would occur for a mouse action).
Exercises
Using the techniques shown for a multilevel vertical list, add subnavigation items to the vertical list created at the end of the chapter.
Look at the numerous examples of CSS-based navigation used in websites, and find some tricky-looking actions. Using the View Source function of your web browser, look at the CSS these sites use, and try to implement something similar for yourself.