How to Create a Menu That Indicates the Current Page, as a PHP Include
See this code in action on the demo pages.
This tutorial assumes you know how to use PHP includes. If not, see How to Create a Web Page Template Using PHP Includes.
One way to do this
After reading the article "Keeping Navigation Current With PHP" at the excellent "A List Apart" Web site, I was intrigued. This article explains how to use a PHP include menu that indicates the current page. Of course, if your menu code is in a PHP include file, all the pages on your site can use the same menu code, which is very efficient. It means that when you need to make a change to your menu, you only edit one file and all the pages on your site are instantly updated. The idea of using an include for a menu is nothing new; what was intriguing was that the article descibed a technique to have the menu indicate the current page while being an include.
All in all, pretty slick.
But … perhaps not slick enough for me. Unfortunately, the technique explained in the article requires that you create a unique variable at the top of every single page. This makes the actual menu code simpler. But it would be better not to have to put something unique on every page … sort of defeats the purpose of the efficiency of an include, in my mind.
A more efficient way
Every Web page already has a unique identifier in the form of a URL, if you think about it, so it makes more sense to me to somehow use the URL as an identifier instead of spending time placing a unique variable at the top of every page. Using the URL as an identifier makes the menu include itself a little more complicated, but you only have to code the menu once, and then you don't have to do anything special on every page; just include the menu and rock and roll.
So I wrote
this code below; simply adapt this code to your site and save it as an
include file for a menu. I use the SCRIPT_NAME environment variable, which
is
the part of the URL that follows the domain name, so this code will
work on any site that has its own domain name that can make use of the SCRIPT_NAME
environment variable. For example, if a page URL is:
http://www.teacherjohn.com/tutorials/phpmenu.php
then the SCRIPT_NAME environment variable is:
/tutorials/phpmenu.php
Sample code for the menu include
Here is the sample code for the include. See this code in action on the demo pages.
<div id="menu">
<ul>
<?php
$thispage = getenv('SCRIPT_NAME');
if ($thispage == "/index.php")
{
echo("<li>Home</li>");
} else {
echo("<li><a href=\"/index.php\">Home</a></li>");
}
if ($thispage == "/about.php")
{
echo("<li>About Us</li>");
} else {
echo("<li><a href=\"/about.php\">About Us</a></li>");
}
if ($thispage == "/products.php")
{
echo("<li>Products</li>");
} else {
echo("<li><a href=\"/products.php\">Products</a></li>");
}
if ($thispage == "/services.php")
{
echo("<li>Services</li>");
} else {
echo("<li><a href=\"/services.php\">Services</a></li>");
}
?>
</ul>
</div> <!-- end menu -->
The CSS
This code doesn't cause anything to be highlighted; you can do that yourself with CSS. It simply displays the current page list item in the menu without making it a link, while making all other list items in the menu links. So, assuming your menu is coded as a list as this code does, place the menu in a div with an id of "menu", for example, and simply use CSS to style list items that descend from the menu div (the first rule) differently from links that descend from the menu div (the second rule):
/* This styles the current page menu item */
#menu li {
font-weight: bold;
}
/* This styles all menu items except the current page menu item */
#menu a {
font-weight: normal;
}
Of course you can make the menu as pretty as you wish!
Adapting the code to work on your site
It's very easy to adapt this code to work on your site. Let's look at a block of code that produces one item in the menu.
For a page at the root
In this
example, this page is at the root of the domain. In other words, the URL of
this page would be:
http://www.mydomain.com/about.php
if ($thispage == "/about.php")
{
echo("<li>About Us</li>");
} else {
echo("<li><a href=\"/about.php\">About
Us</a></li>");
}
Remember that the SCRIPT_NAME variable (shown in bold and red above) is that part of the current page’s URL that follows the domain name.
This page’s menu item text is shown in bold and purple above.
So this stucture would work for any page at the root of your domain (in other words, any page that lives directly in your public_html directory). Simply change what's in red to match the filename, and what’s in purple to match the text to appear in the menu.
For a page in a subdirectory
In this example, the URL of this page would be:
http://www.mydomain.com/catalog/productlist.php
if ($thispage == "/catalog/productlist.php")
{
echo("<li>Product List</li>");
} else {
echo("<li><a href=\"/catalog/productlist.php\">Product
List</a></li>");
}
For a page in a sub-subdirectory
In this example, the URL of this page would be:
http://www.mydomain.com/sales/amaerica/reps.php
if ($thispage == "/sales/america/reps.php")
{
echo("<li>Sales Reps</li>");
} else {
echo("<li><a href=\"/sales/america/reps.php\">Sales
Reps</a></li>");
}
If you don’t have your own domain name …
It's also easy to adapt this code to work on your site if you are on a Web hosting service with a tilde (~) account. Let's look at a block of code that produces one item in the menu.
For a page at your root
In this
example, this page is at the root of your personal public_html folder. In other words, the URL of
this page would be:
http://www.otherdomain.com/~dm160cmasmit1234/index.php
if ($thispage == "/~dm160cmasmit1234/index.php")
{
echo("<li>Home</li>");
} else {
echo("<li><a href=\"/~dm160cmasmit1234/index.php\">Home</a></li>");
}
Remember that the SCRIPT_NAME variable (shown in bold and red above) is that part of the current page’s URL that follows the domain name.
This page’s menu item text is shown in bold and purple above.
So this stucture would work for any page at your personal root (in other words, any page that lives directly in your public_html directory). Simply change what's in red to match the filename, and what’s in purple to match the text to appear in the menu.
For a page in a subdirectory
In this example, the URL of this page would be:
http://www.otherdomain.com/~dm160cmasmit1234/final/index.php
if ($thispage == "/~dm160cmasmit1234/final/index.php")
{
echo("<li>Final Home</li>");
} else {
echo("<li><a href=\"/~dm160cmasmit1234/final/index.php\">Final Home</a></li>");
}
For a page in a sub-subdirectory
In this example, the URL of this page would be:
http://www.otherdomain.com/~dm160cmasmit1234/final/about/aboutus.php
if ($thispage == "/~dm160cmasmit1234/final/about/aboutus.php")
{
echo("<li>About Us</li>");
} else {
echo("<li><a href=\"/~dm160cmasmit1234/final/about/aboutus.php\">About Us</a></li>");
}