How do I use PHP to build a website menu with dynamic highlighting?

Question

I need to change color of selected menu whenever that page is active and it should stay until another menu is clicked.I have used jquery like

$('.navigation ul li a').click(function(){

 $(this).css({"background-color":"#ffffff"});
 $('.navigation ul li a').css({"background":"transparent"});

});

But it works only for the click function only.I need it to be active till i move to another menu .plz help!!!

Answer 1

PHP Only

Let us assume that your website has the following menu:

• Home
• Pistols
• Rifles

At the top of the Home HTML page, insert:

<?php $this_page = "Home"; ?>

At the top of the Pistols HTML page, insert:

<?php $this_page = "Pistols"; ?>

At the top of the Rifles HTML page, insert:

<?php $this_page = "Rifles"; ?>

In your css-file, add an id, with the accompanying format, for the menu item whose page is the one displayed in the browser. Call this id #cur_item, for example.

Edit your navigation HTML to look like this:

<ul class="navigation">
    <li <?php if ($this_page == "Home"):?> id="cur_item" <?php endif; ?> >
        Home
    </li>
    <li <?php if ($this_page == "Pistols"):?> id="cur_item" <?php endif; ?> >
        Pistols
    </li>
    <li <?php if ($this_page == "Rifles"):?> id="cur_item" <?php endif; ?> >
        Rifles
    </li>
</ul>