Faux Active Link

Over there at The Man in Blue there’s nice tip about how to ‘hide’ link to a current page. Here’s server-side solution to improve your main navigation.

You should know some basics of PHP or ASP to follow examples below and also rename your files according to server-side technology used. Also, this is way too basic for advanced programmers, so don’t bother if you’re the one. I know i’m not : ).

Main Navigation

Main navigation is usually one unordered list, something like:

<ul id="mainNav">
    <li><a href="/">home</a></li>
    <li><a href="/about/">about</a></li>    
    <li><a href="/products/">products</a></li>
    <li><a href="/services/">services</a></li>
    <li><a href="/contact/">contact</a></li>

What we are aiming for is to replace <a> tag with something else, in this case it will be <span>.

Particular Pages

Open each page and place a string on the top of everything else and assign a value which will be descriptive, for example “homePage”, “aboutPage”, “productsPage”, “servicesPage” and “contactPage”. Something like:

<?php $pageName = "homePage"; ?>
... the rest of HTML/PHP here...

if you are using PHP, or

<% pageName = "homePage" %>
... the rest of HTML/ASP here...

if you are using ASP. Repeat this for every page you want… Next, cut #mainNav unordered list, save it as include file and include it back in the same place of every page you’ve modified–PHP:

<?php include 'mainNav.php'; ?>

and ASP:

<!--include file="mainNav.asp" -->

The Magic

Here is an example of what mainNav.php should look like:

<ul id="mainNav">
    <li><?php if ($pageName == 'homePage') { echo '<span>home</span>'; } else { echo '<a href="/">home</a>'; } ?></li>
    <li><?php if ($pageName == 'aboutPage') { echo '<span>about</span>'; } else { echo '<a href="/about/">about</a>'; } ?></li>    
    <li><?php if ($pageName == 'productsPage') { echo '<span>products</span>'; } else { echo '<a href="/products/">products</a>'; } ?></li>
    <li><?php if ($pageName == 'servicesPage') { echo '<span>services</span>'; } else { echo '<a href="/services/">services</a>'; } ?></li>
    <li><?php if ($pageName == 'contactPage') { echo '<span>contact</span>'; } else { echo '<a href="/contact/">contact</a>'; } ?></li>

and here’s mainNav.asp:

<ul id="mainNav">
    <li><% If pageName = "homePage" Then Response.Write "<span>home</span>" Else Response.Write"<a href='/'>home</a>" End If %></li>
    <li><% If pageName = "aboutPage" Then Response.Write "<span>about</span>" Else Response.Write"<a href='about/'>about</a>" End If %></li>    
    <li><% If pageName = "productsPage" Then Response.Write "<span>products</span>" Else Response.Write"<a href='products/'>products</a>" End If %></li>
    <li><% If pageName = "servicesPage" Then Response.Write "<span>services</span>" Else Response.Write"<a href='services/'>services</a>" End If %></li>
    <li><% If pageName = "contactPage" Then Response.Write "<span>contact</span>" Else Response.Write"<a href='contact/'>contact</a>" End If  %></li>

Add/modify as desired, the styling is up to you…

Update: JavaScript Solution

If you don’t have an option to use server-side scripting, there is nice post with explanation and example: Clear Links to Current Page.

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?