Indicating current page on navigation bar

Something that a majority of websites don't do, and should, is to show some sort of indication on the navigation if one of the nav. tabs refers to the current page. This is a small annoyance but completely unnecessary.

I made a little "red light" .gif, just 5x5px. This shows up like an LED. (Attachment 1). Then I just stuck a row of "if" clauses in the header.inc

Code: Select all

<li class="r"><a href="./search_category.php"><?php if ($b == 'search_category') echo '<img src="./../images_articles/redarrowleft.gif" class="redarrow" width="5" 
                   height="5" alt="arrow to health">'; ?><span class="i">By Category</span></a>
</li>

Styling is

Code: Select all

.redarrow {
height: 5px;
width: 5px;
float: left;
border: none;
padding: 5px 1px 0 0;
}

Yes I can hear Graham now, this should be a function. I'll get to it today. The graphic could be cooler, too. But the point here is not the code. The point is taking the trouble to implement this very simple extra for the user's convenience.

Now if the user goes to click on the link to the page he's already on, he sees (Attachment 2).

I've looked at quite a few design sites and most of them cite this as a mistake: linking to the current page. E.g. from Webapges That Suck:I tried as an alternative changing the current page navigation button to "Home Page"* which functions quite well; it was something like

Code: Select all

<a href = '
<?php 
if ($p == 'index') { echo "index.php";} else {echo "sextoys.php";}
 echo '>';
if ($p == 'index') { echo "HOME PAGE";} else {echo "SEXTOYS";}
 ?>
'></a>

But I didn't like the way it looked, with the HOME PAGE button changing position on every screen and often buried in an illogical spot.


*(if that wasn't clear, I had like 9 navigation buttons on the home page linked to non-home-page locations; when you went to one of those pages, the button that was previously the navigation to that page would change into a button for the home page)

Attached Images

	redlight.gif (825 Bytes, 85 views)
	Image1.gif (1.3 KB, 30 views)

That in itself is a no-no. That's consistency in navigation gone straight away if the user can't rely on where a certain link might be.

I use a system whereby I grey out the text and remove the hyperlink capability all in one go.

A function checks a page id for a match in the navigation and if found replaces the <a> node with a <span> node with the same text.

As the css has an 'li span' style defined, this style is automatically applied.

Everything happens automatically, you just have to adopt a regime for adding an id to your page that matches with your navigation.

Here's another way,

function fillMenuItems()
{
//array of menu items key is the display
$menuItem['Page 1 display name'] = '/index.php';
$menuItem['page 2 display name'] = '/page2.php';

foreach($menuItem AS $menuName => $menuFile){
if($_SERVER['PHP_SELF'] == $menuFile){
echo "<li class='r'><a href='$menuFile'><img src='./../images_articles/redarrowleft.gif' class='redarrow' width='5' height='5' alt='arrow to health'><span class='i'>$menuName</span></a> </li>";
}else{
echo "<li class='r'><a href='$menuFile'><span class='i'>$menuName</span></a> </li>";
}
}
}