PHP menu navigation

Question

How can I build a PHP navigation menu that highlights the current page using this image tab system?

<a href="index.php" title="Home">
    <img src="images/menu/SR_MenuHome.gif" 
        alt="Home" 
        width="52" 
        height="31" 
        onmouseover="this.src='images/menu/SR_MenuHome-ov.gif';" 
        onmouseout="this.src='images/menu/SR_MenuHome.gif';"
        />
</a>
<a href="company.php" title="Company">
    <img src="images/menu/SR_MenuCompany.gif" 
        alt="Company" 
        width="76" 
        height="31" 
        onmouseover="this.src='images/menu/SR_MenuCompany-ov.gif';" 
        onmouseout="this.src='images/menu/SR_MenuCompany.gif';" 
        />
</a>
<a href="investors.php" title="Investor Relations">
    <img src="images/menu/SR_MenuIR.gif" 
        alt="Investor Relations" 
        width="157" 
        height="31" 
        onmouseover="this.src='images/menu/SR_MenuIR-ov.gif';" 
        onmouseout="this.src='images/menu/SR_MenuIR.gif';" 
        />
</a>

Answer 1

You could use the get array and set a variable that determines the highlighted class.

This is probably the most primitive approach but will work for this purpose.

$class = $_GET['selected_class'];

Makes it so that your URL can use the GET array superglobal to pass variables.

http://www.yourdomain.com/?selected_class=about

<a href="index.html" title="Home"  class="<?if(strcmp($class, 'about') ==0){echo 'selected';}?>"><img src="images/menu/SR_MenuHome.gif" alt="Home" width="52" height="31" onmouseover="this.src='images/menu/SR_MenuHome-ov.gif';" onmouseout="this.src='images/menu/SR_MenuHome.gif';"/></a>

Repeat for all your tabs, changing the name in the strcmp function to check against the next relevant class. This will make it so the selected class is determined by the url. You can then apply your styles for highlighting to the .selected class.

You could also use javascript to get this value from the get array and manipulate the dom to set the class. This is just provided as the most basic approach.

Also, if you want to go all CSS and your images are small enough, I would ditch the roll over events and make the buttons CSS background images that use the :hover state in CSS to set the background-image property.

http://www.w3schools.com/CSS/css_pseudo_classes.asp

EDIT: Edited as requested. This will make a get variable for the selected page. I'm going to add that varible to your href attr. so on click the page with the variable is loaded.

<? $class = $_GET['selected_tab']; ?>

<a href="index.php?selected_tab=home" title="Home">
    <img src="images/menu/SR_MenuHome.gif" 
        alt="Home" 
        width="52" 
        height="31" 
        class="<? if(strcmp($class,'home')==0){echo 'selected';} ?>"
        onmouseover="this.src='images/menu/SR_MenuHome-ov.gif';" 
        onmouseout="this.src='images/menu/SR_MenuHome.gif';"
        />
</a>
<a href="company.php?selected_tab=company" title="Company">
    <img src="images/menu/SR_MenuCompany.gif" 
        alt="Company" 
        width="76" 
        height="31" 
        class="<? if(strcmp($class,'company')==0){echo 'selected';} ?>"
        onmouseover="this.src='images/menu/SR_MenuCompany-ov.gif';" 
        onmouseout="this.src='images/menu/SR_MenuCompany.gif';" 
        />
</a>
<a href="investors.php?selected_tab=investors" title="Investor Relations">
    <img src="images/menu/SR_MenuIR.gif" 
        alt="Investor Relations" 
        width="157" 
        height="31" 
        class="<? if(strcmp($class,'investors')==0){echo 'selected';} ?>"
        onmouseover="this.src='images/menu/SR_MenuIR-ov.gif';" 
        onmouseout="this.src='images/menu/SR_MenuIR.gif';" 
        />
</a>

Add the styles for .selected to your css files. If you want them inline, put a style tag in the header and put them there.

   <style>
      .selected{border-bottom:2px #fff solid;}
</style>

In this example I'm just putting a border property on the selected element. You could use any CSS style.

EDIT:

If you wanted to change the state of your images based off css rather than js, you'd have to move the actions over to CSS making use of the various pseudo-selectors available. You could do this by making your elements either blocks or inline blocks (depending on the order of the menu, vertical or horizontal) and then set the background-image property based on state. This would eliminate the need for an img tag (which is probably a good thing for the sake of semantics.

So if you had a menu of links like so:

<a class="nav-item" href="one">Home</a><a class="nav-item" href="two">About</a>

You could style the states of these with background images

<style>
.nav-item
{display:inline-block; width:76px; height:31px; background-image:url('path/to/upstate_image.gif');}

.nav-item:hover
{background-image:url('path/to/hover_image.gif');}

.nav-item.selected
{background-image:url('path/to/selected_image.gif');}
</style>

Make note, in this approach the selected element must be added to the new .nav-item class, so the code I provided previously would have to reflect that.

class="nav-item <? if(strcmp($class,'investors')==0){echo 'selected';} ?>"

This adds the class to all the a tags themselves. Using this method the a tag will load the images you want as the background image, and you will not even need to worry about an img tag or any js.

Here's a rough demo using more primitive css styles like color and background (i didn't have the time to make images.)

http://www.idrivecreative.com/offsource/demo_for_detonate.php

http://www.idrivecreative.com/offsource/demo_for_detonate.php?selected_tab=company

You can see the state changes and how they are accomplished using css by viewing the source. Hope this helps.

http://www.w3schools.com/css/pr_background-image.asp

Should you need help with syntax.