Learning Report 8
Location Indicators on Main Navigation
Resource: http://school.blainerobertson.net/media/videos/navtabs2.swf
What did I learn?
This week I learned how to use CSS to highlight the link in your navigation that corresponds to your current location in the website. For example, if you look at the main navigation while on this page, you'll see that there is a red arrow pointing to the "assignments" link. I had known that there was some way to create this effect using CSS, but hadn't put in the time learn how to do so until our teacher Brother Roberston mentioned that he had just posted a couple video tutorials on this very topic.
I feel like this really is a useful feature for a website, especially after reading through Steve Krug's Don't Make Me Think about web usability. He explains that as users feel comfortable and at ease using your webpage, their confidence in your ability to provide credible content increases. Something as simple as highlighting the link that corresponds with the current location helps add to the ease of navigation and sense of "place" on your webpage.
How did I implement it?
I had already learned how to create rollover effects in CSS,so what I gleaned from the video tutorials was how to have the website "recognize" which page it is on. In order to do this, you have first have to specify a "class" in the <body> tag of each page. For example, in the HTML code for this page, I added this:
<body class = "assignments">
Next, I used the "body class" to trigger the desired effect in CSS. In my webpage, I happened to use image sprites to have arrows point to links as the cursor hovers over them, so for me the desired CSS effect was to adjust the sprite so that the link with the arrow would be shown rather than plain link. So here is what my CSS code looked like:
.home #homenav,
.aboutme #aboutmenav,
.interests #interestsnav,
.resume #resumenav,
.portfolio #portfolionav,
.assignments #assignmentsnav,
.contactme #contactmenav
{
background-position: 0 -40px;
cursor: default;
}
The .home piece of code refers to the class specified in the <body> tag, and #homenav refers to the id of the link in my navigation module. In this example you can see that I connected multiple selectors with commas, because the css code needed to produce the desired effect in each was the same.
As for the css code within the curly braces, background-position: 0 -40px; adjusts the sprite so that the link with the arrow is displayed, and cursor: default; prevents the cursor from changing from the standard cursor to the "this is clickable!" cursor, further emphasing the concept that the user is already on the page that the link corresponds with.
Once again, this is fairly simple process with a very beneficial effect. I will definitely be using this type of effect on all navigation schemes that I design.
