highlight navigation PHP

Question

I've launched a website a while back and successfully used Javascript + CSS to highlight the current page on the navigation. However, it is not working in Safari and it does not validate well, when using Javascript, so I decided to have PHP assign the CSS id to the HTML elements. So far, it works fine, compared to the other times where there was two of each link displayed, when it was attempted in PHP. My problem is that all links look normal and the CSS property is not applied. I have a feeling that it has to do with my PHP code, but I'm not certain.

The site address is here

As for the PHP code, here it is:

<?php
echo('<li><span class="bold">Main</span>');
echo('<ul>');
if ($page=="home")
{
echo('<li><a id="current" href="index.shtml">Home</a></li>');
}
else
{
echo('<li><a href="index.shtml">Home</a></li>');
}
if ($page=="faq")
{
echo('<li><a id="current" href="faq.shtml">FAQ</a></li>');
}
else
{
echo('<li><a href="faq.shtml">FAQ</a></li>');
}
if ($page=="about")
{
echo('<li><a id="current" href="about.shtml">About Bryce</a></li>');
}
else
{
echo('<li><a href="about.shtml">About Bryce</a></li>');
}
echo('<li><a href="contact.php">Contact Bryce</a></li>');
if ($page=="sign guestbook")
{
echo('<li><a id="current" href="sign.shtml">Sign Guestbook</a></li>');
}
else
{
echo('<li><a href="sign.shtml">Sign Guestbook</a></li>');
}
if ($page=="view guestbook")
{
echo('<li><a id="current" href="view.shtml">View Guestbook</a></li>');
}
else
{
echo('<li><a href="view.shtml">View Guestbook</a></li>');
}
echo('</ul>');
echo('</li>');
echo('<li><span class="bold">Info</span>');
echo('<ul>');
if ($page=="projects")
{
echo('<li><a id="current" href="projects.shtml">Projects</a></li>');
}
else
{
echo('<li><a href="projects.shtml">Projects</a></li>');
}
if ($page=="books")
{
echo('<li><a id="current" href="books.shtml">Books</a></li>');
}
else
{
echo('<li><a href="books.shtml">Books</a></li>');
}
echo('</ul>');
echo('</li>');
echo('<li><span class="bold">Misc.</span>');
echo('<ul>');
if ($page=="cover designs")
{
echo('<li><a id="current" href="coverdesigns.shtml">Cover Designs</a></li>');
}
else
{
echo('<li><a href="coverdesigns.shtml">Cover Designs</a></li>');
}
echo('<li><a target="_blank" href="http://www.lulu.com/brycecampbellsbooks"&gt;Lulu Store</a></li>');
echo('<li><a href="rss/">RSS</a></li>');
echo('</ul>');
echo('</li>');

?>

In order to give you guys an idea of what the highlighting effect should look like, here is the CSS that is supposed to be applied to the current page:

#current {
   font-style: italic;
   text-decoration: none;
   color: #000000;
  }

When looking up what I was doing wrong, it told me that I was implementing it right, but it does not seem that the PHP is getting the values.

Answer 1

Try:

echo $page;

to see what you get. Could you post the code that assigns $page?

Answer 2

Hi,

I dont find any problem in your php code. better can you change your css like below...

.current {
   font-style: italic;
   text-decoration: none;
   color: #000000;
  }

Answer 3

for the love of god don't use that code!!!! do this!

<li><a href=""<?php if($page=='about'): ?> id="current"<?php endif; ?>>about</a></li>
<li><a href=""<?php if($page=='otherpage'): ?> id="current"<?php endif; ?>>other page</a></li>

youre giving the php haters more ammo!

Answer 4

After programming in php for years, and learning what not to do by long periods of trial and error, here are some overall recommendations for making your debugging and your life easier in general, based on that code:

• Make a very clear separation between your php and your html. In other words, have the html of your app in templates. At a bare minimum those templates could be php files that you include that have the minimum actual php necessary. Beyond the bare minimum, it will probably be easier for you if you use a third-party templating system. I recommend smarty. It's totally possible to keep everything well separated by good discipline, but it's much easier to keep things separate using a good templating system, in the beginning.

• In general in php we have the luxury of knowing generally what a page should look by the time we have pulled the input from $_REQUEST and the data from the datastore/database and done our operations on them. So once we have all the data exactly how we want it, we should be able to have a whole section that involves manipulating input data and then just pass everything to a template with some minimal display logic in it to show the look of the final page. E.g. instead of

  if($page == 'about'){ echo "<a href='about.php'>About</a>"; }

  determine the type of data outside of the html and only then pass on that determination on, e.g.

  $possible_links = array('about'=>array('href'='about.php', 'text'=>'About'), 'other'=>array('href'=>'other.php', 'text'='other pages')); $current_link = $possible_links[$current]; ... ... in separate script, optimally: ... echo "<a href='".$current_link['href'].">".$current_link['text']."";

`

• In your own code, try looking into frameworks using the MVC pattern, for a very robust separation technique. Obviously if you're working on someone else's legacy code, that's not as easy, so in that case just try to keep things compartmentalized as much as you can (especially html from php).

Answer 5

This is probably an easier way to do what you want:

<?php
// heredoc syntax ftw!
$menu = <<<MENU
<ul id="nav">
 <li><a href="/">Home</a></li>
 <li><a href="/foo">Foo</a></li>
 <li><a href="/bar">Bar</a></li>
 <li><a href="/baz">Baz</a></li>
 <li><a href="/inga">Inga</a></li>
</ul>
MENU;
$lines = split("\n", $menu);
foreach ($lines as $line) {
 $current = false;
 preg_match('/href="([^"]+)"/', $line, $url);
 if (substr($_SERVER['REQUEST_URI'], 0, 5) === substr($url[1], 0, 5)) {
  $line = str_replace('<li><a h', '<li class="current"><a h', $line);
 }
 echo $line."\n";
}
?>

Just edit $menu at the top and the script will take care of the rest.