Faux Active Link

18. Nov 2004.

Characters	816
Syllables	221
Words	165
Sentences	9

Over there at The Man in Blue there’s nice tip about how to ‘hide’ link to a current page. Here’s server-side solution to improve your main navigation.

You should know some basics of PHP or ASP to follow examples below and also rename your files according to server-side technology used. Also, this is way too basic for advanced programmers, so don’t bother if you’re the one. I know i’m not : ).

Main Navigation

Main navigation is usually one unordered list, something like:

<ul id="mainNav">
    <li><a href="/">home</a></li>
    <li><a href="/about/">about</a></li>    
    <li><a href="/products/">products</a></li>
    <li><a href="/services/">services</a></li>
    <li><a href="/contact/">contact</a></li>
</ul>

What we are aiming for is to replace <a> tag with something else, in this case it will be <span>.

Particular Pages

Open each page and place a string on the top of everything else and assign a value which will be descriptive, for example “homePage”, “aboutPage”, “productsPage”, “servicesPage” and “contactPage”. Something like:

<?php $pageName = "homePage"; ?>
... the rest of HTML/PHP here...

if you are using PHP, or

<% pageName = "homePage" %>
... the rest of HTML/ASP here...

if you are using ASP. Repeat this for every page you want… Next, cut #mainNav unordered list, save it as include file and include it back in the same place of every page you’ve modified–PHP:

<?php include 'mainNav.php'; ?>

and ASP:

<!--include file="mainNav.asp" -->

The Magic

Here is an example of what mainNav.php should look like:

<ul id="mainNav">
    <li><?php if ($pageName == 'homePage') { echo '<span>home</span>'; } else { echo '<a href="/">home</a>'; } ?></li>
    <li><?php if ($pageName == 'aboutPage') { echo '<span>about</span>'; } else { echo '<a href="/about/">about</a>'; } ?></li>    
    <li><?php if ($pageName == 'productsPage') { echo '<span>products</span>'; } else { echo '<a href="/products/">products</a>'; } ?></li>
    <li><?php if ($pageName == 'servicesPage') { echo '<span>services</span>'; } else { echo '<a href="/services/">services</a>'; } ?></li>
    <li><?php if ($pageName == 'contactPage') { echo '<span>contact</span>'; } else { echo '<a href="/contact/">contact</a>'; } ?></li>
</ul>

and here’s mainNav.asp:

<ul id="mainNav">
    <li><% If pageName = "homePage" Then Response.Write "<span>home</span>" Else Response.Write"<a href='/'>home</a>" End If %></li>
    <li><% If pageName = "aboutPage" Then Response.Write "<span>about</span>" Else Response.Write"<a href='about/'>about</a>" End If %></li>    
    <li><% If pageName = "productsPage" Then Response.Write "<span>products</span>" Else Response.Write"<a href='products/'>products</a>" End If %></li>
    <li><% If pageName = "servicesPage" Then Response.Write "<span>services</span>" Else Response.Write"<a href='services/'>services</a>" End If %></li>
    <li><% If pageName = "contactPage" Then Response.Write "<span>contact</span>" Else Response.Write"<a href='contact/'>contact</a>" End If  %></li>
</ul>

Add/modify as desired, the styling is up to you…

Update: JavaScript Solution

If you don’t have an option to use server-side scripting, there is nice post with explanation and example: Clear Links to Current Page.

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?

Follow @markodugonjic

21 shouts to “Faux Active Link”

trovster
001—2004.11.18.20:50

Urm, haven’t you got the if statement the wrong way round. If it’s the page name you don’t want the link, else you do. You have it opposite way round.

I use the if pagetitle to add id=”active” to the LI to style the active page differently. I could also remove the link in the same way.
marko
002—2004.11.19.10:55

Trovster, you’re right! It’s fixed now : )

dusoft
003—2004.11.19.16:53

Even easier solution is just check for the page name if there are multiple pages used, e.g.:

$basename=pathinfo($_SERVER["PHP_SELF"]);
$basename=$basename["basename"];
if ($basename=="book.php") //do something
elseif ($basename=="index.php") // do something
.
.
.

Arjen
004—2004.12.15.16:17

Hi Marko, thanks for the useful tutorial.

However, I have a small question about this. When I test this locally it works fine. When I upload it, the php gets included but somehow doesn’t see the $pageName variable, so I never get the active link.

When I put this before the include:
echo $pageName ;

it nicely says: ‘homePage’. However the following menu include doesn’t ‘see’ this. Any ideas??
marko
005—2004.12.15.17:28

I don’t have an idea about this, but there is full working example and also a ZIP file, so you can check with it.

Try to rename file extension of mainNav.php to mainNav.php.txt, and then include it. The only explanation apart from misspelling is that the file which should be included is executed before including.
Arjen
006—2004.12.15.18:58

Renaming seems to do the trick. Many thanks!
If only I understood why exactly this is happening…

Oh well, it works so I’m happy.

Thanks again.
B.J. Schaefer
007—2004.12.21.04:27

Here’s my oh-so-humble contribution. This is a bit more extensible, and much easier to manage.
It uses the same concept as your example: set $pageName to the name of the current page, and include the mainNav.php file wherever you want it inserted.// mainNav.php /* Put this up at the top. It's a just simple array with the page name as the key, and the URL as the value. */ $nav_links = array( "home" => "/", "products" => "/products/" );
/* A simple foreach construct to cycle through each of the navigation links in the $nav_links array. It checks against the key to see if it's the current page, and prints out a span instead of an anchor if so. */ print "<ul id="mainNav">"; foreach( $nav_links as $link_text=>$link ){ if( $link_text == $pageName ){ print "<li><span>$link_text</span></li>"; } else { print "<li><a href="$link">$link_text</a></li>"; } } print "</ul>";
Have Fun, and I hope this helps! ;)
marko
008—2004.12.21.12:53

B.J., this is excellent, because one doesn’t have to set conditions for each page. Now, the script handles it all automatically. I’ve just added the <li>s in your example. Once again—great solution!
B.J. Schaefer
009—2004.12.22.02:57

Duh. Guess I should have double checked my code. Oh well. Anyway – I’m really digging your site (so many wonderful and thoughtful touches). Oh, and, um, if you ever need a PHP/MySQL developer…you’ve got my email *wink wink* (too bad I don’t live in Croatia)

Peace out,
B.J. Schaefer
ryan
010—2005.01.13.19:44

I tried to explain this awhile back but didnt do such a good job as this! Thanks.

Here’s what I had to say:

http://parrfolio.com/thoughts/index.php?p=19
ryan
011—2005.01.14.01:16

I tryed your technique with a header include that is inside my wordpress application. I can’t get the if/else statements to work. It just leaves it blank.

Any ideas?
Jimbo
012—2005.01.14.11:13

This is a great solution and it avoids a query string which is what I most like about it, I used the exact same method when I first started making my new website a few months ago in PHP, before this post (still not live!).

Spooky.
marko
013—2005.01.14.12:09

Ryan,

This is a bit tricky solution, but try something like following code. You don’t have to name every page, just copy -> paste or include it it where your navigation should be. You should enable mod_rewrite (read WP manual for this). $_SERVER["REQUEST_URI"] returns something like /wp/archive/2005/, depending on page requested.

<?php $nav_links = array( "home" => "/", "archive" => "/archive/" ); $requestedPage = $_SERVER["REQUEST_URI"]; echo '<ul id="mainNav">' . "\n"; foreach ( $nav_links as $link_text => $link ) { if (strpos($requestedPage , $linkText) != false) { echo '<li><span>' . $link_text . '</span></li>' . "\n"; } else { echo '<li><a href="' . $link. '">' . $link_text. '</a></li>' . "\n"; } } echo '</ul>' . "\n"; ?>
ryan
014—2005.01.14.20:46

Thanks marko. I still can’t get this to work. Works fine outside of WP but inside it does’nt.

Here is what I’m trying to do:

<div id= "<?php if ($pageName == 'rideshare') { echo 'ridesharetitle'; } else { echo 'hometitle'; } ?>">

This is in my WP index.php page on the very top:

<?php $pageName = "rideshare"; ?> <?php require('./wp-blog-header.php'); ?> <?php require_once('http://www.panictour.com/graphical/header.php'); ?>

I’m doing image relplacements for titles for each page of my site. I have the corrispoding css id for each page in my css. I have a header.php include where this code is being called. I include this header inside my wp index.php page. This works outside of WP perfectly. * the “<>” have no pspaces of course.

Thanks for you help on this.

-ryan
ryan
015—2005.01.14.20:46

None of my code showed up! It did in the preview.
marko
016—2005.01.15.11:34

Ryan,

Regarding the code not showing up—use < instead of <, otherwise it will be stripped. You don’t have to place any unnecessary spaces.

If you place <?php $pageName = "rideshare"; ?>in your index.php, then all the subpages will have a ‘name’ “rideshare”, because all of them are actually this same index.php, but with a different query strings. To make you this clear, place somewhere inside the body following line <?php echo $pageName; ?>.

Following example should solve the header problem. You don’t have to label page with $pageName:

<div id="<?php if ($_SERVER["REQUEST_URI"] == '/rideshare/' /* or /rideshare.php or whatever URI for this page is... */) { echo 'ridesharetitle'; } else { echo 'hometitle'; } ?>">.

(REQUEST_URI is the URI without http://domainname.com and starts with a slash.
ryan
017—2005.01.15.23:30

Works like a charm. Thanks for all your help. I appreciate it.

Thanks,

Ryan
ryan
018—2005.01.16.01:01

I have one more question if you have time. By the way I’m a beginner at php. :)

This works with this url ….com/rideshare/:
<?php if ($_SERVER["REQUEST_URI"] == '/rideshare/') { echo 'ridesharetitle'; } else { echo 'hometitle'; } ?>

Within the /rideshare/ folder I have dynamic premalinks gernerated by WP.
ex: ….com/rideshare/this-title/

How can I get the code
<?php if ($_SERVER["REQUEST_URI"] == '/rideshare/') { echo 'ridesharetitle'; } else { echo 'hometitle'; } ?>
to include all the dynamic directories under the /rideshare/ directory? Hence, directories such as ….com/rideshare/this-title/ or ….com/rideshare/generated-title/ or ….com/rideshare/could-be-anything/

Site in development is here:
http://www.panictour.com/rideshare/

Postscript:
Have you ever released your “preview comment” code? I know hicks has his version but your seems alot nicer. I’d like to get ahold of yours if you don’t mind. By the way your site is very clean and professional. I like it!

Thanks again for the help.

-Ryan
marko
019—2005.01.16.13:31

Ryan,

Let’s stay on topic here. The logic for the last scenario is pretty much the same. You just need some function to split the string REQUEST_URI and place the substrings in an array. Something like:
<?php list($directory, $subdirectory) = split('/', $_SERVER["REQUEST_URI"]); echo '<div class="' . $directory . ' id="' . $subdirectory . '">'; ?>
I have no time to test it, but it’s a good start for you to dive into it.

Yes, the comment form preview script have been explained and there is also a full list of posts about coding.
Justin Perkins
020—2005.02.04.10:41

Just wanted to point out the Server Variables are always full of good information, like the REQUEST_URI.

Nobody has talked about ASP since the beginning, maybe since it is so old school. Try using

Request.ServerVariables(“SCRIPT_NAME”)
PaulC
021—2005.07.28.15:08

Couldnt you do this just by re-defining the body tag?

eg. you have these styles:

li, li a {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
font-size: 10px;
text-decoration: none;
}
body.home li .home, body.about li a.about, body.products li a.products{
color: #FF0000;
text-decoration: underline;
font-weight: bold;
}

the you change the body tag to any of the following <body class=”about”> or <body class=”home”> etc. etc.

Then you list items / menu is as follows:
<ul>
<li><a href="index.php" class="home">home</a></li>
<li><a href="about.php" class="about">about</a></li>
<li><a href="products.php" class="products">products</a> ,< > </li>
</ul>

Just a crazy idea.. :)

see also http://www.apple-source.co.uk/