'active state' for a navigation bar

laurah · 07-26-2009, 08:51 PM

Hello!

I'm quite new to web design and Javascript in particular and I was wondering if somebody could help me to resolve a problem with the navigation bar in a website I am currently working on.

The navigation bar has 3 main categories and there is an 'active' state so the page currently viewed is shown as grey underline text in the navigation bar. The thing is, I also have sub-categories that are not included in the navigation bar but I'd like to make it so the sub-category page currently being viewed makes the main category to which it is attached showing as 'active' in the navigation bar.

This is the structure of my site:
index.html
contact.thml
illustration

index.html
illustrationproject1.html
illustrationproject2.html
illustrationproject3.html

photography

index.html
photography1.html
photography2.html

So for example, if I'm in illustrationproject1.html, the Illustration tab in the navigation bar should be on the active state.

This is the code I have so far:
Navigation Bar:
[CODE]
<ul id="nav">
<li class="nav_item"><a href="illustration/index.html">Illustration</a></li>
<li class="nav_item"><a href="photography/index.html">Photography</a></li>
<li class="nav_item"><a href="design/index.html">Design</a></li>
<li class="nav_item"><a href="stories/index.html">Stories</a></li>
<li class="nav_item"><a href="profile.html" title="Profile">Profile</a></li>
<li class="nav_item"><a href="contact.html" title="Contact">Contact</a></li>
<li class="nav_item"><a href="links.html" title="Links">Links</a></li>
</ul>
[ICODE]

This is the Javscript for the active state:
[CODE]
function setActive() {
aObj = document.getElementById('nav').getElementsByTagName('a');
for(i=0;i<aObj.length;i++) {
if(document.location.href.indexOf(aObj[i].href)>=0) {
aObj[i].className='active';
}
}
}
[ICODE]

So this code is working but I'm just not sure how to apply it to the subcategories as well.
I can see what I should do, write some "if" statement but I don't enough of Javascript yet for this...

I hope I explained the problem clear enough!
Thanks :-)

rnd me · 07-26-2009, 11:15 PM

here's how we do it at work:

first modify the nav table to add extra classes defining sections.

Code:

<ul id="nav">
<li class="nav_item illust"><a href="illustration/index.html">Illustration</a></li>
<li class="nav_item photo"><a href="photography/index.html">Photography</a></li>
<li class="nav_item design"><a href="design/index.html">Design</a></li>
<li class="nav_item stories"><a href="stories/index.html">Stories</a></li>
<li class="nav_item profile"><a href="profile.html" title="Profile">Profile</a></li>
<li class="nav_item contact"><a href="contact.html" title="Contact">Contact</a></li>
<li class="nav_item links"><a href="links.html" title="Links">Links</a></li>
</ul>

now edit each and every page (sorry), and add a class to the body tag defining the section, using the same classes as before.
example:

Code:

<body class="illust">

now make a css stylesheet to modify only the active link (according to body's class):

Code:

<style>
.illust .illust a,
.photo .photo a,
.design .design a,
.stories .stories a,
.profile .profile a,
.contact .contact a,
.links .links a { background-color:yellow; color:blue;  }
</style>

that's it.
now, you won't rely on javascript or brittle file naming conventions to show the active section. You can change the section by editing the body class. Also, don't forget that you can define more than one class per class attrib, so you can even pool your sections together in this manner.

advantages to not using javascript for this:

CSS will appear faster than javascript would because styles are typically parsed before the page is shown,
whereas javascript typically has to wait for everything (or at least the whole page) to load before running.

CSS also uses less CPU than JS, so you site will be snappier on iPhones and other slow machines.

There are also about 5% of surfer who disable javascript by default, but CSS use is near 100%, so everyone will see it.

laurah · 07-27-2009, 01:20 AM

Thanks a lot, it works super fine!
I wouldn't have thought about doing it this way but I get it now :-)