The ZURBlog is where we discuss interaction design and strategy.

We use our extranet daily to present a lot of work to our clients. From wireframes to Photoshop mockups and business goals to sketched opportunities, we have several established ways of presenting information. One of the ways we handle versioning, or the updating of assets on the extranet, is through a dl-powered navigation list.

When we need simple and effective on-page navigation, to either jump to content on the page or flip to another view, we use the dl element. Its sub elements, the dt and dd, make it very easy for us to create inline links with a clear label. Here we're going to share with you a fast, lightweight method for how we'll use CSS to do it.

What's a DL?

The dl element is a definition list. Plain and simple, it's an HTML element that is used to display terms (dt) and their descriptions (dd). However, definition lists aren't just semantically limited to dictionary style definitions. Rather, they are very versatile and can be used in a handful of meaningful ways:

1. Showing terms and descriptions (like a dictionary)
2. Presenting dialogue between people
3. Showing simple biographical information for a person

Each instance is still semantically correct (you have a term and description), but serves a variety of different uses. We love to see HTML elements be flexible enough for varied applications and have no problem utilizing them this way in our own work.

Creating the Sub Navigation

As we mentioned before, we use dls for simple, scalable sub navigations. It's an easy and semantically correct way of labeling a set of links for added context. To better illustrate what we mean, here's a screenshot from one of our client's extranet page:

As shown above, the light gray "label" is the dt while the sub links are instances of dds with links inside. The gray label on the left helps tell users what this nav is for: links on this page. This makes our nav easy to understand and more meaningful. Now, let's break down the HTML and CSS used to create this sub navigation.

The HTML

We'll use four HTML elements to create the necessary markup for our sub navigation. Take a look:

1. <dl class="nav">
2. <dt>On this Page:</dt>
3. <dd class="active"><a href="#">Final Wireframes</a></dd>
4. <dd><a href="#">Updated Wireframes</a></dd>
5. <dd><a href="#">Initial Wireframes</a></dd>
6. <dd><a href="#">Sketches</a></dd>
7. </dl>

The CSS

The CSS is equally simple as the HTML. We've coded up styles for the entire list below, including an active or current state for our links. Check it out:

1. dl.nav {
2. width: auto;
3. height: 27px;
4. margin: 0 0 18px;
5. }
6. dl.nav dt, dl.nav dd {
7. float: left;
8. display: inline;
9. }
10. dl.nav dt {
11. color: #999;
12. font-weight: normal;
13. }
14. dl.nav dd a {
15. margin-left: 6px;
16. padding: 5px 12px;
17. text-decoration: none;
18. -webkit-border-radius: 12px;
19. -moz-border-radius: 12px;
20. }
21. dl.nav a:hover {
22. background: #eee;
23. }
24. dl.nav dd.active a {
25. background: #2daebf;
26. color: #fff;
27. }

Here's a quick step-by-step look at what we're doing with the CSS for the list:

1. First, we ensure the dl can properly contain all children elements, so we fix the width and height. (This is the best option for quick cross browser compatibility).
2. Then we float: left; the links and list label to make them appear all on one line.
3. Next we give our links and list label their own styling
4. And finally we add our hover and active states for the links so users know which page they're on.

And that's that. Small HTML footprint and light, flexible CSS that works well across all browsers (save the browser extensions) and doesn't even require any images.

The Finished Demo

We've put together a shorter walk-through with our demo code. It works in all browsers, but it works especially well in Safari and Firefox (due to the rounded corners). Be sure to check it out and leave your questions or comments below!

View Demo »