In order to navigate your Web site
efficiently, visitors need to know where they are at all times. That’s why
providing visual feedback to indicate the current page’s position in the site
navigation scheme is such an important usability issue.

For visitors who enter your Web site
through the home page, providing feedback as they move from page to page
through your navigation structure is a convenience and a confirmation that they
have arrived at their intended destination. However, those visitors could use
their memory (and the Back button in their browsers) to retrace their steps if
they become disoriented.

Visitors who enter your site at some
other page via links from a search engine or other site can’t retrace their
steps to a known starting point. Instead, they must rely solely on the clues
you give them to navigate your site. Your site’s navigation bar is like a map
to your site, but even the best maps can be hard to use if visitors can’t find
their current location. That’s why you need to provide your visitors with the
visual feedback they need to orient themselves in your site.

Orientation tools

To address this need to orient
visitors in your site, some Web builders use breadcrumbs, which are a string of
links that show the path through the site’s navigation structure to the current
page. Breadcrumbs are a good solution for large sites with complex navigation
schemes, but they can be overkill for many smaller sites.

One of the simplest, and most effective,
tools for orienting the visitor to the current page location is to highlight
the button for the current page in the navigation bar, as shown in Figure
A
. The highlighted button serves the same purpose as the You Are
Here pointer on the store directory/map at the mall.

One of the advantages of a You Are
Here button treatment is that it’s very efficient. Since it’s
part of the navigation bar that’s already an integral part of your Web page,
you don’t need to devote any additional page space to an orientation tool, and
visitors are already accustomed to looking at a navigation bar for information
about the site’s navigational structure.

Styling a You Are Here button with CSS

Perhaps the most common approach to
styling a You Are Here button with CSS is to create a separate class rule for
that button and apply it to the link for the current page’s button in your
navigation bar.

I’ve covered how to create a
CSS navigation bar
in a previous column. The following code example shows
how you might start with that same basic technique and add highlighting to the
button for the current page.

div#menu {
    height: auto;
    width: 150px;
    color: #FFFFFF;
}
div#menu li {
    height: 40px;
    width: 125px;
    margin: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    text-align: center;
    line-height: 250%;
    list-style-type: none;
    background-color: #003399;
    border: 1px solid #000000;
}
div#menu li a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
div#menu li a:link, div#menu li a:visited {
    font-weight: normal;
    color: #FFFFFF;
}
div#menu li a:hover {
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: underline;
}
div#menu li.youarehere {
    color: #000099;
    background-color: #66CCFF;
}

Here’s the markup for three stacked
buttons. In this case, the current page corresponds to Button 2.

<div id="menu">
<ul>
<li><a href="link1.html">Button 1</a></li>
<li class="youarehere">Button 2</li>
<li><a href="link3.html">Button 3</a></li>
</ul>
</div>

Note that the div#menu li.youarehere rule changes the text and background colors
originally set in the div#menu li
rule. This effectively highlights the button for the current page and visually
differentiates it from the other buttons in the navigation bar.

In the markup, adding class=”youarehere” to the
<li> tag for the appropriate button designates that button to receive the
You Are Here treatment. Also, note that there is no link in the markup for that
button. There’s no point in having a link to the current page, and removing the
link code from the markup simplifies the CSS by eliminating the need to define
rules for the <a> tag and its various pseudoclasses under the youarehere
class.