EvoBloggito

Quick Tutorial: Simple PHP and CSS to Highlight Current Navigation Section

Author: Ray Gulick; Published: Jul 12, 2009; Category: CSS, Design/Development, Information Architecture, PHP for Designers; Tags: Design/Development, Information Architecture; 10 Comments

Good website navigation not only helps visitors find the information they are looking for, it also tells them where they are on a website. This is especially important in light of the fact that people may arrive anywhere on a website via search or a link from another website. They will appreciate some indication of what section of the website they are in; sort of a “you are here” marker.

Essentially, we want to tell the navigation list that, if the navigation section is ‘X’, then this particular navigation list item should have a "current" class applied to it, which would allow us to style that item to highlight the navigation section. But the last thing we need, if we’re busy and have better things to do, is to edit the navigation on each page individually: every time we add or remove a page or change a navigation item name, we would have to update the navigation on every page.

We can make our lives easier with PHP. Remember, PHP executes on the server: you must upload your files to a PHP-enabled server to see it work. It will not execute on your desktop unless you have a local server set up. But if so, you are way beyond this little tutorial…

Below is the HTML for a very simple list-based navigation, and below that, the accompanying CSS. See the demo here»

The demo navigation should look like this:

The HTML

<ul class="navigation">
<li><a href="index.php">Home</a></li>
<li><a href="what.php">What We Do</a></li>
<li><a href="who.php">Who We Are</a></li>
<li><a href="why.php">Why We Do It</a></li>
<li><a href="need.php">Why You Need It</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>

The CSS

ul.navigation { margin:0px; padding:0px; list-style-type:none; }
ul.navigation li { display:inline; margin:0; padding:0; }
ul.navigation a { float:left; display:inline; font-size:14px;
     font-weight:bold; text-decoration:none; white-space:nowrap;
     padding:2px 10px 2px 10px; background:#fc0;
     border-left:1px solid #fff; }
ul.navigation a:link, ul.navigation a:visited { color:#000; }
ul.navigation li a:hover { color:#fff; }

Create a PHP include from the navigation list and place a call for it on each page.

This include is placed on each page in place of the navigation list with the following call for the include:

<?php include("includes/navigation.php"); ?>

This calls for the include, which was named “navigation.php”, and placed in a folder called “includes”.

Add PHP code to the list items in the include file to display the “current” class when called for:

<ul class="navigation">
<li<?php echo ($navsection == 'home') ? ' class="current"' : ''; ?>>
  <a href="index.php">Home</a></li>
<li<?php echo ($navsection == 'what') ? ' class="current"' : ''; ?>>
  <a href="what.php">What We Do</a></li>
<li<?php echo ($navsection == 'who') ? ' class="current"' : ''; ?>>
  <a href="who.php">Who We Are</a></li>
<li<?php echo ($navsection == 'why') ? ' class="current"' : ''; ?>>
  <a href="why.php">Why We Do It</a></li>
<li<?php echo ($navsection == 'need') ? ' class="current"' : ''; ?>>
  <a href="need.php">Why You Need It</a></li>
<li<?php echo ($navsection == 'contact') ? ' class="current"' : ''; ?>>
  <a href="contact.php">Contact Us</a></li>
</ul>

Add styles to highlight the navigation items when list item has "current" class applied.

ul.navigation li.current a:link, ul.navigation li.current a:visited
     { color:#fff; background:#000; }
ul.navigation li.current a:hover
     { color:#fff; background:#c00; }

One last thing: put the appropriate navigation section info on each page.

At the very top of the HTML page, prior to the doc statement, add the following 3 lines of code:

<?php
    $navsection = 'home';
?>

Note that this particular example would be found above the doc statement on the home page. Because it matches the navsection statement attached to the home page list item on the menu, that list item displays with the “current” class.

This technique works well on the top level of list-based drop-down menus as well, though I have found that it’s easier to attach the "current" class to the link rather than to the list item. CSS, of course, must be adjusted accordingly.

Related Posts

Child Themes: A Sanity-saving Approach to Redesigning/Hacking WordPress Themes

We launched a new website with new EvoGallery CMS WordPress theme

Whew! Launching two websites in the same week

Website Launch: FBT Architects in Albuquerque

Why Bad Websites Happen to Good Companies, Part 9: Having a Print Designer Design Your Website

10 Responses to “Quick Tutorial: Simple PHP and CSS to Highlight Current Navigation Section”

1. Greg says:

   April 8, 2012 at 8:27 pm

   Thanks, This is exactly what i was looking for. Great Tutorial!
2. chris says:

   December 22, 2011 at 3:15 pm

   Thank you for this.
3. Mike says:

   November 11, 2011 at 1:59 pm

   Great tutorial it works great!

   Thanks!
4. Dadra says:

   October 20, 2011 at 7:59 am

   Excellent! Just what I was looking for. Thanks!
5. Bryce says:

   March 21, 2011 at 2:09 pm

   Yep, makes sense to me. Thanks for the simple explanation, kept me from having to think of a way to achieve this goal. Timelines are such a pain in the butt, eh?

   Cheers
6. darmie says:

   December 8, 2009 at 9:34 am

   hey! great article thanks!!
7. nico says:

   October 1, 2009 at 2:24 am

   Hi Ray,

   great article!!!

   i’ve been looking for this kind of simple and logical explanation in many books or on websites!

   I’m even following a “small” course for developping with html, css, javascript and php, but to assemble all these languages aren’t easy.
   It’s not enough to know the syntaxe use!
   What is generally missing is a technique, like you are giving us!

   Can you recommand me other articles?

   I’m looking for the “architectural” use of php: how php create an htlm page on the client(navigator) and how php includes (for exemple) operate afterwards on the client page and so on.

   sorry for my english… it’s not my mother tongue!

   regards
   Nico
8. Ray Gulick says:

   September 18, 2009 at 2:46 pm

   Rob: Note that there should be a double >> enclosing the opening list tags (sometimes people remove one).
   Another problem might be no space before “class” in ‘ class=”current”;’

   Those are two common errors.
9. rob says:

   September 18, 2009 at 2:16 pm

   great tutorial and exactly what I need, but I”m getting parsing errors, think it has something to do with

   <li>
10. Ben says:

    August 14, 2009 at 1:14 pm

    A good tutorial very well explained. Big thanks!