Keeping Navigation Current With PHP

66 Reader Comments

1. Some have commented that, using CSS alone, there’s no way to change the link for the current page into unlinked text. Here’s a solution that comes close.

   For the current page, I use CSS not only to change the colors, but also to change the cursor {cursor: text;}. The current page doesn’t appear to be a link, even when you mouse over it. However, if the visitor clicks, it still functions as a link. (There’s probably an easy way to remove the link functionality via JavaScript, but I don’t know what it is. If someone does, please post it.)

   Let me back up and fully describe the way the whole thing, which has two parts:

   1. I use separate files to store my navigation menus (and more), and use SSI (server side includes) to pull them into the web pages. Of course, this can be done using any number of technologies (including PHP), so take your pick.

   The included file contains the menu:

   • Home
   • About
   • Links

   …

   Notice the ids (use classes if you prefer. I use “link” here so that I can use the page name in the body tag. This way, the ids are different.) If the site navigation has only one level, the same menu can be used for the whole site; otherwise you can use several include files.

   2. In the of every web page, change the a style for the current page:

   And of course, you’ll want to define more link styles before that, preferably in a separate CSS file.

   Credit: I think it was either meyerweb.com or zeldman.com (or maybe both) where I got this method. I’m not sure, but I think I came up with the {cursor: text} bit on my own. Many web developers think it’s a bad idea to disguise links like this, but I like it.

   Demo: You can see it in action at a site I maintain: http://www.zimfest.org/ .

2. my example http://www.alistapart.com/discuss/keepingcurrent/3/#c5448
   removes the href=”..” from the for the current page (leaving an for the css to style – the default skin for my site, which that codes from, does indeed use ‘sliding doors’) — it could be modified to use a different tag completely or be nothing but the text if so desired.

3. I use a combination of css selectors and a simple php script. The script- navigation.php- generates a stylesheet based on it’s path info, and is included like this:

   navigation.php looks like this:
   
   #menu {
   /* style specific to current category */
   }

   /* more styles as necessary */

   All the php script does it strip the / off the front and the .css off the end, and use that text as part of the selector.

   This way, the XHTML can be changed to add whatever menu items are needed, and the PHP only needs to change when the actual style changes.

4. This is a good article, i recommend you use this way, but it’s too much complicated for big sites or even medium sites, i recommend people use arrays instead of IF’s, this make the code more easy to mantain, can be slow? maybe, maybe not, but you don’t need to bother what section you are, you just need to define one array for the entire site, or maybe, make a script that construct this array based on your site files.

   Hope this idea helps. I can give examples here, but it’s take much time from me and other people, but is something like
   $array[‘home.php’] = “site-style”;
   $array[‘…samething above
   or even you can do bi-dimensional arrays like
   $array[‘home.php’] = array(‘site-style-1’, ‘site-style-2’, …);

   or if you are not familiary just make
   $array[‘home.php’][0] = “index-0-style”;
   $array[‘home.php’][1] = “index-1-style”;
   etc…
   Just imagine, arrays are powerfull.

   Hope this help.

5. Great article, this one. I agree with many of the previous poster in that, if the example provided is not the most elegant from a coder’s point of view, it certainly is one of the easiest to understand to the designers’ crowd that make the biggest chunk of ALA’s visitors. If you’re into coding, then you can upgrade to more elegant, array-based options if you want.

   Now, as much as I’d love to work with PHP, unfortunately (?) our workgroup is heavily JSP-based, therefore I’d be very thankful if someone could point me to a JSP-based (Struts) approach to this issue. Thanks.

6. I have AppServ installed locally and I get following error messages:

   Warning: main(/phpincludes/navigation.php): failed to open stream: No such file or directory in c:documents and settingssimemy documentsprojectsnetiquetteindex.php on line 19

   Warning: main(): Failed opening ‘/phpincludes/navigation.php’ for inclusion (include_path=’.;c:php4pear’) in c:documents and settingssimemy documentsprojectsnetiquetteindex.php on line 19

   Note: All other PHP scripts works well, I don’t know where I’m wrong, I followed instructions exactly.

7. I use PHP for navigation on many sites that I’m developing, but instead of using an include() for each bit of (X)HTML to include I just include one PHP file at the top of each page. The PHP file includes functions for displaying headers, footers, and any other repeated elements. The upside with this is that the PHP interpreter will not be required to lookup multiple files on the server — it only needs one. Furthermore, instead of creating a variable at the top of each page, I just pass the page info into the function call, for example:

   Just another way about it.

8. Hi,

   I code a Little PHP Script.

   rene@grassegger.at

   //Definition Function “footer”
   function footer($hl, $hl2) {

   //1. directoryname: e.g. home/
   //2. Title Tag: e.g. “Zurück zur Startseite”
   //3. Link name: e.g. Home
   //4. call name: this is the name you use in the website, to highlight the right link.
   $navidata = array(
   array (“directory/”, “Title”, “Steuerprofi”, “Steuerprofi”),
   array (“directory/”, “Title”, “Bestellen”, “Bestellen”, “U”),
   array (“directory/”, “Title”, “Download”, “Download”, “U”),
   array (“directory/”, “Title”, “Registrieren”, “U”),
   array (“directory/”, “Title”, “Lohnprofi”, “Lohnprofi”),
   array (“directory/”, “Title”, “Bestellen”, “Bestellen2”, “U”),
   array (“directory/”, “Title”, “Download”, “Download2”, “U”),
   array (“directory/”, “Title”, “Registrieren2”, “U”),
   array (“directory/”, “Title”, “Projekte”),
   array (“directory/”, “Title”, “AGB”, “AGB”),
   array (“directory/”, “Title”, “Kontakt”, “Kontakt”)
   );

   //Domain http://www.example.com
   $domain = “http://www.example.com”;

   ksort($navidata);

   reset($navidata);
   echo ‘

   ‘;

   while(list ($key, $wert) = each ($navidata)) {

   //If there Is a subsection “U”
   if ($wert[4]==U) {
   echo (“

   • “);
     } else {
     echo (“
   • “);
     }
     echo (““);
     echo (“$wert[2]“);
     echo (“

   “);
   echo (“n”);
   }
   echo ‘

   ‘;

   }
   ?>

   ########## End Code

   This is the code I’m using to call the script and hightlight the right section.

   If you dont have an Sublink, just enter “foo” or “nothing”.

   You can use it, for what you want. Just let the litte copyright thing in the script.

   It is a simple script, but with some little modifactions it fits every “needs” you have.

   HTH

   Rene Grassegger

9. Is there a way to make this work with the navigation as a separate include file too? I have tried to, but the “current page” code doesn’t seem to resolve in time to highlight the page you are on.

10. What was the point of this again? Are we trying to change the style for the current link or trying to show people what page they are on? I just use php or asp to print out the current page somewhere, like in a header right above the pages content. Works fine for me.

    The style does not change or course, but the point is to show the visitor where they are correct? Save the arrays and just make it obvious. Between title pages, headings, etc it is pretty simple to figure out where you on a site, and changing the background color does nothing for those who cannot see. Printing the title of the current page does.

    Also, I certainly disagree with the current groupthink mandate of not linking to the current page. Why not? If a user clicks a link to get somewhere, why kill the link once the get there?

11. The navigation bar on the right side of pages in alistapart.com removes a link pointing to the current page. This approach to navigation
    follows the advice of Jakob Nielsen for corporate websites (see http://www.useit.com/alertbox/20031110.html).

    If this concept of navigation menus is the standard, is there a way to use javascript instead of php to solve this dilemma of removing the link to the current page?

12. Hi I am totally new to this but i did tried Corel Draw as a web page (1 page only) but I no idea on how you guys create the e-mail pop-up once a hand-pointer is clicked on a web page (design using Corel Draw).

    Any idea…?

13. On my previous posting i forget something.

    I forget the css styles.
    If you look on http://www.info.at you see the thing working.

    The programm only puts the right css-class to the tags and the css does the rest.

    If you look on http://www.info.at if you click on a section the programm puts in the class and the link gets highlighted.

    Sorry for the forgotten infos.

    Greetings

    Rene

14. IRT: Dominique PERETTI
    there is really no point in replacing PHP tags with smarty tags. especially in this simple example!

15. Well this sure looks a useful technique, but I wanted to use an `ordered list` and generate numbers for my list items.

    So I started here, and it fell over in IE6 :

    Specifically, setting the width to 33% using CSS causes all those

    items to be numbered as ‘1’. Try it you’ll see the problem !

    Removing the width: 33% and the list numbering returns to sequential for all items. Add it back and the numbering is set to 1 for all li items with that style. Weird.

    1. Order Receipt
    2. Create Job Record Card
    3. Raise Datachecking Form
    4. Create Sub Job
    5. Enter Onto Schedule

16. Hello. I dont know if Im posting this on the right place but anyway. Im making a page. And I also scripted the news script. Ok all works. When Iuse click on news it show news. But when user click on one news which one would be shown in cell where is include() function but the news is shown in all window not in one cell ? How I shguld do that the only one news would be shoen in the cell of my index page to ? Is there any chance or I must include header, footer left and right blocks in each script ? I hope you understand me 🙂

    Thanks