-1

I'm trying to figure out how to add a css class to a <li> tag in my menu navigation. I'm using a template that gets included on every page of site. In the template is the menu navigation code. I need to set the css class on the <li> for the corresponding active page using PHP_SELF I presume?

Navigation looks like this

Navigation Menu

And this is what it should look like when the page is displayed that corresponds to the page that was clicked in the navigation menu.

Navigation Menu with class="current"

Here is the navigation menu code

<!-- MENU BEGIN -->
<div id="menu">
<ul id="nav">
<li><a href="/">Home</a></li>
<li <?php echo $class_current; ?>><a href="technician-jobs/">Technician</a></li>
<li <?php echo $class_current; ?>><a href="programming-jobs/">Programming</a></li>
</ul>
</div>
<!-- MENU END -->

Here is the PHP function I am trying to create

function classCurrent(){
if(dirname($_SERVER['PHP_SELF']) == true) {
 echo ' class="current"';
}
else {
 echo '';
 }

 $current = classCurrent();
 return $current;
}

I know this is possible, I just can't figure it all out yet.

Mike
  • 99
  • 1
  • 12

2 Answers2

0

You may try specifying some base class that has variables for the corresponding menus. So like if you are requesting the technician page:

Class Activmenu {
public $technician = true;}

alternatively you may use superglobal variables but this is safer. And in the menu you can check for the true item

if(Activemenu->technician)? echo'class="activeclass"' : 0;

Checking urls you will run into problems, if later on you have to modify your url structure.

Sesertin
  • 462
  • 2
  • 11
  • I tried the code you gave but it breaks the page. the log error is PHP Parse error: syntax error, unexpected '->' (T_OBJECT_OPERATOR) in – Mike Jun 09 '14 at 07:44
  • Sorry it is just some dummy code. I suggest making a singleton pattern class http://stackoverflow.com/questions/203336/creating-the-singleton-design-pattern-in-php5 and setting getting its properties. If you are not already familiar with this take a look into singleton pattern and getters setters, you shall have the answer. – Sesertin Jun 09 '14 at 15:17
  • if I take this route, can you tell me of security flaws? – Mike Jun 09 '14 at 18:35
  • Well I'm not a security specialist, but as far as I'm concerned this is not really a security issue. You have a runtime variable in a php code that is assigned a value. None of this is visible in html. If someone can maniulate your php, your code suffers somewhere else. – Sesertin Jun 09 '14 at 19:59
  • thanks. I think what I need is the suggestion by Mark B on this answered question http://stackoverflow.com/questions/20125318/php-navigation-menu?rq=1 and then a full tutorial here http://alistapart.com/article/keepingcurrent. What do you think? – Mike Jun 09 '14 at 20:04
  • Yes, Marc B and I are suggesting the same. The point is checking for variables, not urls, as your urls are likely to change in the future. – Sesertin Jun 10 '14 at 10:41
0

So it is really simple actually to do this. All that needs to be done is have a variable set on the active page above the <html> tag preferably.

Example:

<?php $currentPage = 'technician';
<html>

So now we have this variable set on the technician page above the html tag. Now to call it in the template page on the navigation menu <li> all that needs to be done is the following.

<?php if ($currentPage=="technician") echo " class=\"current\""; ?>

Now just need to repeat this step for each page of the website.

This was also answered here PHP navigation menu

and a real good tutorial on how to do it is here http://alistapart.com/article/keepingcurrent

As a result the navigation code will end up looking something like this

<!-- MENU BEGIN -->
<div id="menu">
<ul id="nav">
<li<?php if ($currentPage=="home") echo " class=\"current\""; ?>><a href="/">Home</a></li>
<li<?php if ($currentPage=="technician") echo " class=\"current\""; ?>><a href="technician-jobs/">Technician</a></li>
<li<?php if ($currentPage=="programming") echo " class=\"current\""; ?>><a href="programming-jobs/">Programming</a></li>
</ul>
</div>
<!-- MENU END -->
Community
  • 1
  • 1
Mike
  • 99
  • 1
  • 12