Where am I
It's important for your site visitor to know where exactly he is right now so he could found his way among your site and know where he is and where can he go, in more than one level structured sites it maybe represented like this (Home > products > Laptops) for example, but in 1 level structured sites like this one for example there is other ways.
You also have to take care not to link to the same page you're on so the page you're on should not be linked to in the same page, as it's extremely confusing.
The most well known technique is adding a class to the list item and style it differently through the CSS if we took the navigation on the left side here as an example it will be like this
<ul>
<li class="here">home</li>
<li><a href="about.htm" title="accesskey: 2" accesskey="2">about</a></li>
...</ul>
Now you could style it let's say like this
.here { font-style: italic; }
This is a way but it's not the best, as you should never link to the same page you are on in the navigation we could take that chance and use the opportunity that the page your on lack the <a> around it's name in the navigation, so we got that example
<ul>
<li>home</li>
<li><a href="about.htm" title="accesskey: 2" accesskey="2">about</a></li>
...</ul>
And style it like that
#nav { font-style: italic; }
#nav a { font-style: normal; }
By that you specified that the non linked item in this undefined list will be italic, without the need of specifying a class name in each page it will just style it as italic if it's not a link.
You may need to add <span> instead of <a> around your non linked item for giving the desired style as I needed it here in this site. I wrapped the non linked item with <span> because I needed to add some padding to it, here is what's in point CSS
#header ul li a, #header ul li span {
display: block;
padding: 5px 0;
}
That's all for today, good luck with your usable, semantic & beautifully styled navigations.
November 14, 2006, 08:49 AM | CSS , User experience , Web standards , XHTML
TrackBack
TrackBack URL for this entry:http://www.point-studios.com/cgi-sys/cgiwrap/boudym/managed-mt/mt-tb.cgi/76