Posted on Friday, May 2nd 2008 at 19:34
The Visual Active State: Popular Techniques and Examples
3 comments so far | Digg | del.icio.us
A menu with a visual active state is a popular technique on web sites for obvious reasons:
- It gives the user a clear signal of where he/she is on the site, especially for visitors coming from a search engine or deep link
- It can be attractive and signal a well-structured and balanced site
- Used carefully, it can replace the classic breadcrumb trail.
This article aim to explain how some popular techniques are used to achieve an active state, including a digestion of our latest laboratory project called :path. I will also show you some simple examples of different visual approaches, including some very popular sites that doesn’t use active states at all.
Is active states on navigation anchors crucial? Should you always use them or are there cases when it is not such a good idea? Use the comments form to discuss the topic.
Examples of active state techniques
Del.icio.us
The minimalistic del.icio.us has the most basic form of active state:
By using server-side logic, delicious removes the anchor on active menu items, producing a black non-linked text. This is the most basic form of active states, but rarely used:
<a href="/devkick">your bookmarks</a></strong> | <a href="/network/devkick">your network</a> | subscriptions | <a href="/for/devkick">links for you</a> | <a href="/post/" id="new-post">post</a>
The disadvantages:
- Relies entirely on server side logic.
- If your site has pages on several levels, you cannot use the main nav to go back to parent pages.
The advantages:
- The solution works without javascript and CSS
- Less markup.
- If your site is only two levels deep, the main nav represent the current page and becomes un-clickable, which may be a good thing according to Nielsen.
Domänhanteraren
The swedish site for domain handling has a left-side menu with a blue active state:
If you look at the source code, you’ll see that they have gone the server-side route by adding a class="cur" to the active menu anchor:
<ul id="leftNav"> <li><a href="/start/login">Logga in</a></li> <li><a href="/start/info">Begär inloggningsuppgifter</a></li> <li><a href="/start/create" class="cur">Skapa konto</a></li> <li><a href="/start/welcome">Om Domänhanteraren</a></li> <li><a href="/start/idn">IDN-konverterare</a></li> </ul>
And here is the CSS that controls the active menu item:
#bodyWrap #leftWrap #leftNav li a.cur {
background-color: #006699;
color: #FFFFFF;
background-image: url(../images/cur.gif);
background-repeat: no-repeat;
}
By simply adding a “cur” class to the active anchor, you can style it like an active state using CSS. This is a solid technique, but not perfect.
The disadvantages:
- You need extra markup in the HTML source.
- There is a link to the current page that might confuse inexperienced visitors, especially if there is a form on the page.
- You will depend on rather complicated server side logic to control the active state.
The advantages:
- The solution works without javascript
- The extra markup required is minimal
Smashing Magazine
The popular web blog Smashing Magazine has a top-menu that directs visitors to different categories of the site that has an orange active state:
Smashing uses a similar technique as above. Here is the (stripped) HTML source:
<body id="showcases"> <div id="header"> <ul> <li><a title="Home" href="http://www.smashingmagazine.com/" class="home">Home</a></li> <li><a title="Graphics" href="http://www.smashingmagazine.com/category/graphics/" class="graphics">Graphics</a></li> <li><a title="Showcases" href="http://www.smashingmagazine.com/category/showcase/" class="showcases">Showcases</a></li> <li><a title="Monday Inspiration" href="http://www.smashingmagazine.com/category/monday-inspiration/" class="monday-inspiration">Inspiration</a></li> <!-- [...] --> </ul>
And the CSS:
#showcases #header ul a.showcases {
background-color: #EB4C07;
color: #fff;
-moz-border-radius: 3px;
}
By adding a unique #id to each section’s <body> and a unique class name to each anchor in the nav, you can use descendant selectors in the CSS to style each active state individually. This is a common and also pretty solid technique.
The disadvantages:
- The HTML and CSS code gets rather bloated with lots of redundant markup
- There is a link to the current page that might confuse inexperienced visitors, especially if there is a form on the page
- You still depend on server-side logic, even if it’s limited to only adding an id to the body tag
The advantages:
- Server-side logic is minimal
- Full control via CSS
- Works without javascript
:path
:path is our own laboratory project that takes a different route. Is uses javascript & jQuery to automatically fetch “active” links and lets you style and manipulate them using jQuery and CSS.
How it works
:path loops through the selected DOM elements, finds the anchors, extracts their href attributes and begins a comparison loop that does the following:
- convert the href attribute into an absolute url without ending slashes, www etc.
- parse the absolute
hrefurl and create an array - take the
window.locationand make it go through the same parser as the href - compare the two arrays and return true if the
hrefis within thewindow.locationpath
A simple example
If :path finds the following href attribute:
/lab/
..and the window.location returns:
http://www.devkick.com/lab/path/index.html
:path converts both URLs using it’s parser and end up with two arrays that looks something like:
["http:", "", "devkick.com", "lab"]
["http:", "", "devkick.com", "lab", "path"]Since the first array, taken from the href, is shorter than the window array, :path will slice the window array using the same length as the href array. Then it will compare the sliced window array with the href array and if there is a match, it will return true and let the active styling begin.
So in this example, the href /lab/ will match the location http://devkick.com/lab/path/ and :path will assume that the href points to a parent or ancestor page related to the current.
This is the basic functionality of :path.
Why?
The main reason for building this selector was that it often requires quite complicated server-side logic to add “active” classes to all navigational elements. And many times I do not have control of the server-side code at all. Since styling a menu including active states shouldn’t be a server-side task, :path takes control of the active navigation elements and lets the front-end developer style it without server-side interaction.
It’s also great because you can style navigational elements on multiple levels without any server-side logic. Just include the script and decide what you want to do with the active anchors. In most cases, it’s enough with simply adding an ‘active’ class to the parent element by typing (example):
$('a:path').parent().addClass('active');
And then do something like this in the css:
#nav .active a{cursor:default;color:black}
#subnav .active a{cursor:default;color:red}:current
But what if you want to style the links that points to the current page differently from the ones pointing ot ancestors? Well, using the same comparison technique, I created a :current selector as well, only targeting the anchors whose href points to the current page. Jacob Nielsen says that you should never have a link that points to the current page, so by following his advice we can eliminate the anchors around those links by doing something like:
$('a:current').each(function() { $(this).replaceWith($(this).text()); });
Conclusion
The disadvantages:
- No active state for users without javascript
- Requires jQuery and a somewhat logical URL structure
The advantages:
- No server-side logic - full control for the designer or front-end developer
- Can style and manipulate active states
- Will automatically fetch active hrefs from a custom selection of elements on any level
Is :path worth using on your site? it’s up to you. I have been using similar techniques before on a few projects and I’m really pleased with taking control of the active states without asking the back-end developer a “favour”. BTW: this sie uses :path itself.
Sites with active states - a visual gallery
Here is a small inspirational collection of visual active states on web site navigation.
New York Times has a tiny tabbed-like nav with active states.
Apple has a clear and attractive active state that fits their brand.
BestWebGallery uses a negative, slick menu with a glowing active state.
I always liked K10k’s nav. It has a clear active state and some unique hover effects with a tagline.
Web Designer Wall has a different hand drawn image-based side menu with an active state that looks like if someone highlighted one of the items with a pen.
Yahoo Sports has a multiple-level menu with classic active states that form an easy-to-follow location trail.
Jaha! Design uses a rare and unique slider as main navigation, with an obvious active state.
The new Coda Coza’s photography section uses clear active states in both it’s main nav and sidebar.
Examples of sites without active states
A lot of large and popular web sites does not have an active state in the main navigation. Some of them does not even have a breadcrumb trail to follow. This makes it really hard for visitors to know where they are, especially if you are landing on a sub-page from a search engine.
Emigre font foundry is one of the sites not having an active state or even a breadcrumb navigation.
The popular weblog TechCrunch does not have active states on their main menu.
Bryan Veloso’s Avalonstar has a main nav without active states. You even have to scroll down pretty far to see where you are.
The grand daddy A List Apart does have active states in their main navigation, but not in the secondary nav on the right side. Not exactly a huge issue, but the visitor’s location would be even more clear if they did.
Facebook’s main menu does not have active states (and neither does MySpace)
Leave a Reply
3 Responses so far.
-
At 12:24 pm on May 19th, 2008 , llamafruit wrote:
Greetings everybody. I stumbled upon this site and I’m just introducing myself.
2 Trackbacks & Pings:
-
Trackback at 4:36 am on May 5th, 2008 by links for 2008-05-05 « Talkabout:
[…] The Visual Active State: Popular Techniques and Examples : DevKick Blog via Google Alert “how some popular techniques are used to achieve an active state, including a digestion of our latest laboratory project called :path. I will also show you some simple examples of different visual approaches, including some very popular (tags: menu design example comparison usability jakob javascript css navigation howto) […]
-
Trackback at 5:36 pm on May 26th, 2008 by lets active:
The Visual Active State: Popular Techniques and Ex……
Bookmarked your post over at Blog Bookmarker.com!…
