demosthenes.info

A blog by Dudley Storey on , , , , , , and anything else that strikes his fancy.

featured articles

popular favourites

Lao Che website with highlighted navigation

Creating “Self Aware” Navigation With PHP

Highlighting the current page that is being viewed in a navigation bar is a popular design choice for many websites. The CSS is easy: make a class for the navigational element that represents the current page in a linked stylesheet:

  1. a.current { background: black; color: white; }

Then apply the class to the appropriate element for the current page. Using our previous exercise as an example:

  1. <ulid=mainnav">
  2. <li><ahref="index.php">Home</a></li>
  3. <li><ahref="about.php">About Us</a></li>
  4. <li><ahref="popular-routes-to-india.php" class=”current”>
  5. Popular Routes To India</a></li>
  6. <li><ahref="prices.php">Prices</a></li>
  7. </ul>

At first glance, this would imply that taking the design option of highlighting the current page would stymie our goal of having a single include, or at least set it back: we’d now have to make the navigation code unique to every page in order to insert the .current class into the appropriate link for each page. That means more work for us, and greater chances of mistakes and inconsistencies in content.

However, with PHP, we do know the name of the page we are currently on: in the last exercise, we have that information contained in the PHP constant title. In that case, we can keep our single include, and make the application of the .current class dynamic in pagestart.php. For each link, we simply have to see if we are on the appropriate page that matches the link, and apply the .current class if we are. (For clarity, only two of the navigational list items are shown below, with sections of code placed on separate lines to enhance readability).

  1. <li><ahref="about-us.php"
  2. class=<?php if (title==”About Us”) echo “current”; ?>”>
  3. About Us</a></li>
  4. <li><ahref="popular-routes-to-india.php"
  5. class="<?php if (title==”Popular Routes To India”) { echo “current”; } ?>”>
  6. Popular Routes To India</a></li>

If we are not on a page that matches title, the link class will be set to “”, which is valid; if we are on a page that matches, class will be set to current and the appropriate CSS will be applied to the link.

Once you know the PHP to produce it, making navigation that is “self-aware” is easy. Adding new links to the navigation bar is as simple as working out the appropriate title value for the associated filename and placing the if statement for the link.

web developer guide

featured comment

by JoelB in Goodbye, JQuery Validation: HTML5 Form Errors With CSS3

what i'm reading

A Storm of Swords: A Song of Ice and Fire: Book Three
A Storm of Swords: A Song of Ice and Fire: Book Three

what i'm watching

Californication: The Third Season
Californication: The Third Season

what i'm playing

Mass Effect 3 Collector's Edition
Mass Effect 3 Collector's Edition

what i'm hearing

Dub FX
Dub FX

blogs

podcasts

no ads ever

This blog is free of advertising, and always will be.

creative commons licensed

The content of this blog is free to use in whatever way you wish under the Creative Commons license.