Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
Positioning tips.
search engine optimization story search.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


Increase traffic.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

CSS Tip:
You Are Here!

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

  
February 2006
Vol. 9, No. 1
 • Usability Tip
 • HTML Tip
 • CSS Tip
  

Readable text and understandable navigation are the two most important components of site usability. One easy way to make your navigation menu more user-friendly is to disable the current page in the menu. We'll show you how to accomplish this using basic HTML and CSS: no JavaScript or PHP coding required!

Control Display By Styling Link States

Very young human infants seem to have three states of being: sleeping, eating, and crying. Hyperlinks in your navigation system have four states of being — and luckily are quieter and easier to manage:

  • Visited: indicates a page the visitor has already seen and who's URL is in the browser's history file.
  • Focus: the link is selected by tabbing with the keyboard instead of with a mouse. Hitting the ENTER key activates the link.
  • Hover: the link is selected by moving the mouse over the link. Double-clicking the mouse (usually) activates the link.
  • Active: the page that's currently open in the browser window.

These four states are actually something called pseudo-classes in CSS. You can use them to style your navigation menu based on the link state. Notice something missing in this? There's nothing to indicate which page is currently active, meaning the page currently open in the visitor's browser.

It's not at all uncommon for a user to click a link and have it reload the current page. That's not bad, but it can be a bit aggravating to some users. Fortunately, it's simple to use an additional HTML attribute to highlight the current page without using any complex coding.

Styling Using A CSS Menu

In a previous Webmaster Tip, Create Stylish Menus, we described how to create a colorful, text-based navigation menu that looks and acts like one creating using images and JavaScript rollovers.

Please refer to that article for a complete description of the technique. For this article, we're going to use the same basic method, but add a twist with the ID element.

Here are the CSS rules for the basic menu:

<style type="text/css">

a:link
{
text-decoration:none;
color:FFFFFF;
background:navy;
font-weight : bold;
width: 100%;
display:block;
}

a:active
{
color:FFFFFF;
font-weight:bold;
background: red;
display:block;
}

a:visited
{
text-decoration:none;
font-weight:bold;
color:FFFFFF;
background:navy;
display:block;
}

a:hover
{
color:FFFFFF;
background: red;
display:block;
}

.navigationBorder
{
background:navy;
border-style:solid;
border-color: red;
border-width:5px;
width:200px;
text-decoration:center;
}

</style>

That creates a menu like the one on this example page. Note the rollover effect you get when you move your mouse over the links or tab through them

The link for the current page looks and acts the same as the links for the other pages. Now, this link is helpfully titled "Current Page" but most Web sites aren't that clear about which is the active link and which links take you to different pages!

Use ID To Highlight The Current Page

Now, it's easy to find some free JavaScript, PHP, ASP, etc. code snippets that modify the look of the current page in a navigation menu. But it's not always that easy to modify the code to meet your requirements and it's almost impossible to debug the result if you didn't write the code in the first place!

So let's do it the easy way with CSS and HTML.

We're going to use the ID attribute to link individual pages in the menu to the menu system itself. This is a three-step process:

  1. Add an ID attribute to each link in your menu system, like this:

    <div class="navigationBorder">
    <a href="YouAreHere_Example1.htm" id="menu-current">Current Page</a>
    <a href="" id="menu-home">NetMechanic Home Page</a>
    <a href="" id="menu-newsletter">Newsletter Archive</a>
    <a href="" id="menu-powerPack">Search Engine Power Pack</a>
    <a href="" id="menu-toolbox">HTML Toolbox</a>
    <a href="" id="menu-browserPhoto">Browser Photo</a>
    </div>


    Note the ID attribute added to each link.


  2. Add an ID attribute to the BODY tag of each page referred to in the navigation menu. So we take the example page and modify the BODY tag like this:

    <body id="current">

    If we were adding this to the NetMechanic site, we might change the BODY tags of the individual pages like this:

    <body id="newsletter">
    <body id="powerPack">
    <body id="toolbox">
    <body id="browserPhoto">


    See how the IDs match? We used the same basic ID name, but added a short identifier (menu) to differentiate them in the CSS rules.


  3. Add a CSS rule that styles whichever page is the current one AND ties together the ID attributes for the page and the link. Yes, this sounds awfully complicated, but see how easy it really is! Here's the new style rule. Just add it before the closing STYLE tag:

    body#current a#menu-current,
    body#home a#menu-home,
    body#newsletter a:menu-newsletter,
    body#powerPack a:menu-powerPack,
    body#toolbox a:menu-toolbox,
    body#browserPhoto a:menu-browserPhoto

    {color:navy;
    background:white;
    display:block;}


    Here, we're tying the ID in each page's BODY section to the menu link for that page. If they match, the browser applies the style rules specified here instead of the style rules we set up for the basic menu system.

See how it looks here in this second example page. Look at the page's source code to see all the code working together.

Good For Usability And Accessibility

Like most accessibility techniques, this increases the usability level of the menu for all users. As Web usability expert Jakob Neilsen notes in his book, Designing Web Usability, Internet newcomers don't have nearly the expertise of early adopters:

"People vary in their spatial reasoning skills and in their short-term memory capacity. Programmers and graphic designers tend to get uncommonly high scores on tests of spatial reasoning skills and are therefore good at visualizing the structure of website. Similarly, young people (including most Web designers) certainly have better memories for obscure codes, such as URLs, than older people. It is safe to assume that most users will have significantly greater difficulty navigating a website than its designer have."

Design a navigation system that's easy to use and understand and you'll have a happier set of users who are more comfortable remaining at your site for a long period.

And don't forget: the absolute most important function of a link is to take the visitor to an active page not an error message! Check your links on a regular basis with the Link Check Tool that's part of HTML Toolbox. You'll feel secure knowing that you have a working navigation system, working internal and external links, and error-free HTML code.

Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2007,
Keynote NetMechanic
All rights reserved.