One of the more efficient ways to handle current navigation highlighting is to give each of your navigation items a unique class name. Then give each page a unique ID on the body element. Then CSS can control what each navigation item looks like based on that body ID. But what if you are using a CMS like WordPress which includes that body tag as part of a template? In this case, we can use PHP to look at the URI of the page and create the ID based on that. Nifty trick!
#36: Current Nav Highlighting: Using PHP to Set the Body ID
Chris Coyier
on
(Updated on )
This is really nice – although it doesn't work with sub-pages.
How can I get this to highlight the main navigation when on a sub page?
Also any ideas to get this to highlight sidebar navigation?
Chris-
Thanks for this tutorial. Thought of this idea before, but just didn't know exactly how to implement it. I have one question. I am developing locally using MAMP, and when I use this trick it leaves my base website directory in with the body id because the root is http://localhost:8888 (ex. http://localhost:8888/mybasedomain/contact_us/ind…leaves mybasedomaincontact_us as the id – I changed the ".php" in your tutorial to "index.php" for my application). Is easy way to fix this for development without having to change my css or add the website root directory as part of the str_replace? Thanks.
I found a solution for the subdirectory issue mentioned by Granulr above. Here's what I did inside my header include file (hopefully all my code posts)…
I also had a variation of the tutorial above where I eliminated the switch statement and just echoed $title for the page title. By the way, this site is set up with index page in each directory/subdirectory for each section of the site.
This may not be the best way, or may be flawed, but it seems to be working for me so far.
<?php
// Get a portion of the URL (string), explode the string into an array using the "/" to separate, and find the value for the second to last array key.
// Pass this value into the switch statement to produce a custom page title for each different pages in the site.
// This page title added to the site base name to complete the title.
$page = $_SERVER['REQUEST_URI'];
$arr = explode('/', $page, 10);
$title = $arr[count($arr) – 2];
$title = str_replace('_', '', $title);
function getTitle() {
global $title;
switch ($title) {
case 'clients':
echo " – Client List";
break;
case 'portfolio':
echo " – Portfolio";
break;
case 'aboutus':
echo " – About Us";
break;
case 'contactus':
echo " – Contact Us";
break;
case 'services':
echo " – Our Services";
break;
default:
echo '';
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition…
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Main Site Title<?php getTitle(); ?></title>
<script type="text/javascript" src="../scripts/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="../scripts/jquery.js"></script>
<link type="text/css" rel="stylesheet" href="../css/main.css" />
</head>
<body id="<?php echo $title; ?>">
that's what i did. I develop using xampp lite and the code concatenates the "mybaseddomain" in front of the "contact_us" for the body id. For now I just added an extra str_replace for "mybaseddomain" until chris responds.
Ive been searching for an article like this for a while, thanks alot chris really helpful.
Other simplest way is to use the slug of the pages with this Function to wodpress:
so you get the slug of the page. For the home you just have to condition it.
Why not just use jQuery for applying a class to when it’s clicked , which is stylized in CSS up front?
IE:
$(‘ul li’).click(function () {
$(this).addClass(className);
});
Thanks a lot for this, works as a charm!