I am currently building a website where it is very important to be able to mark the navigation elements as ‘active’ when you are on the page. This is because, to a degree, the navigation creates the title of the page.
The problem is that, using wordpress, the whole site shares the same navigation. This means it is difficult to mark an element as ‘active’ as it would always be active.
I found a simple (and some might say dirty) solution. I used a server side PHP conditional to every item in the navigation, setting the anchor element’s class to “active” if that’s the page we’re on:
<div id=”navigation”>
<a href=”http://www.arkhamtattoo.co.uk” class=”<?php if($_SERVER['REQUEST_URI'] == ‘/’) echo ‘active’; ?>”>HOME</a>
<a href=”/tattoo” class=”<?php if($_SERVER['REQUEST_URI'] == ‘/tattoo’) echo ‘active’; ?>”>TATTOO</a>
<a href=”/studio-info” class=”<?php if($_SERVER['REQUEST_URI'] == ‘/studio-info’) echo ‘active’; ?>”>STUDIO INFO</a>
<a href=”/artwork” class=”<?php if($_SERVER['REQUEST_URI'] == ‘/artwork’) echo ‘active’; ?>”>ARTWORK</a>
<a href=”/about” class=”<?php if($_SERVER['REQUEST_URI'] == ‘/about’) echo ‘active’; ?>”>ABOUT</a>
<a href=”/contact” class=”<?php if($_SERVER['REQUEST_URI'] == ‘/contact’) echo ‘active’; ?>”>CONTACT</a>
<a href=”/links” class=”<?php if($_SERVER['REQUEST_URI'] == ‘/links’) echo ‘active’; ?>”>LINKS</a>
</div> <!– #navigation –>
The ‘a’ link would be marked as active on the correct page which then allows you to style it up however you like.
This solution does rely heavily on the URL in the browser, but I do not consider this an issue in this case.
Two potentially useful websites:
http://benlancaster.wordpress.com/2008/06/05/html-css-design-patterns/
http://green-beast.com/blog/?p=157