demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Lao Che website with highlighted navigation

Creating “Self Aware” Navigation With PHP, Part II

php / navigation

Estimated reading time: 1 minute, 48 seconds

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:

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

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

<nav role="navigation">
<a href=index.php>Home</a>
<a href="about.php">About Us</a>
<a href="popular-routes-to-india.php" class=”current”>Popular Routes To India</a>
<a href="prices.php">Prices</a>
</nav>

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 , 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).

<a href="about-us.php" class=<?php if (title==”About Us”) echo “current”; ?>”>About Us</a>
<a href="popular-routes-to-india.php" class="<?php if (title==”Popular Routes To India”) { echo “current”; } ?>”>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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.