Recipe 3.9. Creating Navigation That Does Not Link to Itself

Problem

You need to add a menu of links to several related pages, but want to leave off the link to the current page being viewed.

Solution

Use a PHP or JavaScript function on each page to match the address of the current page in a list of related pages. Then build the menu from the list, leaving off the link for the matched address.

Discussion

Some simple scripting can eliminate the need to create and maintain individual, hand-coded menus on each page. In both the PHP and JavaScript versions, you will create arrays for the page addresses and link text, and then use a for loop to compare each address value to that of the current page and build the code for the menu. The PHP code concerns three related pages titled Purple, Green, and Orange:

 <? $color_urls = array('/colors/purple.php',                      '/colors/green.php',                      '/colors/orange.php'); $color_links = array('Purple',                      'Green',                      'Orange'); 

First, you will assign the values you want to use for your menu in the two arrays, making sure the link paths ($color_urls) and link names ($color_links) are listed in the same order. The rest of the code contains the function makeMenu that builds the menu.

 function makeMenu($urls,$links) { $full_path = getenv("REQUEST_URI");  for ($i = 0; $i < sizeof($links); $i++) {   if (!strstr($full_path,$urls[$i])) {    $menu .= '<p><a href="'.$urls[$i].'">'.$links[$i].'</a></p>';   } else {    $menu .= '<p>'.$links[$i].'</p>';   }  }  echo $menu;  }  ?> 

The function expects two parameters: $urls and $links. In our example here, the values you created in $color_urls and $color_links will be sent to the function. By separating the menu making in a function, you can create a variety of other URL and link arrays, and then pass any pair of array names to the function to create the menu you need on that page.

The first line of the function uses PHP's built-in getenv( ) function to assign $full_path a string value equal to the web page's URL minus the protocol and domain namein other words, everything except http://yourdomain.com. The variable $menu will contain the code for the menu and the for loop will add a value to it for each element in the $links array. Then, for each iteration of the loopenumerated by the variable $ia conditional statement compares a value from the $urls array to the current page address, $full_path, using the strstr( ) function.

PHP and JavaScript arrays are numbered starting with 0. In the first iteration of our loop (when $i=0), $urls[$i] refers to element zero in the array, or /colors/purple.php.

If the array value is not found in the address of the current pageif (!strstr($full_path,$urls[$i]))then the corresponding array value in $links gets added to $menu as a link. Otherwise, the corresponding array value in $links gets added to $menu unlinked. You can modify this script to give the unlinked text a color or other design treatment that sets it apart from the linked text, which is a good way to give "you are here" feedback to users as they browse your site.

In the spot in your web page code where you want the menu to appear, add this code:

 <? makeMenu($color_urls,$color_links); ?> 

The JavaScript version works largely the same, but only in browsers that have Java-Script enabled. Because the PHP code is a server-side script, the menus it creates appear regardless of browser configuration. Here is the complete JavaScript code:

 <script type="text/JavaScript" language="JavaScript"> <!-- var colorURLs = new Array('/colors/blue/index.html',                            '/colors/red/index.html',                            '/colors/yellow/index.html'); var colorLinks = new Array('Blue',                             'Red',                             'Yellow'); function makeMenu(URLs,Links) { var Menu= '';  for (var i=0;i<URLs.length;i++) {   if (location.href.indexOf(URLs[i]) == -1) {    Menu += "<p><a href = \"" + URLs[i] + "\">" + Links[i] + "</a></p>";   } else {    Menu += "<p>" + Links[i] + "</p>";   }  }  document.write(Menu); } // --> </script> 

Make note of a few differences from the PHP version: first, the variable Menu must be defined before the function can add values to it in the for loop. Also, the value of the current page address is derived from the href property of the location object. The indexOf method looks for a match between the current page address and the value of URLS[i], returns -1 if it doesn't find one, and adds a linked line to Menu. Call the function with code in your web pages:

 <script language="JavaScript">makeMenu(colorURLs,colorLinks);</script>