Use jQuery or PHP to add an active class to a menu?

I will be making some changes to a menu. Because it is a lot of typing I just want to use the menu on a seperate PHP page and include that file on each page.

The active URL must be assigned a class of "active" in order for it to work. Is there a way to use jQuery especially, or PHP to detect the URL (my directories are folders and each folder may contain two or more pages for different devices) and assign the class to the relevant URL so I only have to type this once?



    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
     <div class="container">
       <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
           <span class="sr-only">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href = "../" >Consolidated Utilities</a>
       </div>
       <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav">
           <li><a href="../about/">About Us</a></li>
           <li><a href = "../billing/">Billing</a></li>
		   <li><a href="../affiliatedsystems/">Affiliated Sytems</a><li>
           <li class = "active"><a href="../rates/">Rates</a></li>
           <li><a href="../conservation/">Conservation Efforts</a></li>
           <li><a href="../contact">Contact</a></li>
         </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

Open in new window

burnedfacelessAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
You may be able to detect the URL path by inspecting $_SERVER['PHP_SELF'] or $_SERVER['REQUEST_URI'] and you can probably use this information to know which of the items to highlight.  This is kind of pidgin code, but it seems workable, at least in concept.

Class Highlighter
{
    public $about = $billing = $affiliatedsystems = $rates = $conservation = $contact = NULL;
    public function __construct()
    {
        // EXTRACT PATH NAME FROM SERVER VARIABLES
        $path = $_SERVER['PHP_SELF'];
        
        // SET THE PROPERTY FOR THIS PATH NAME TO "active"
        $this->$path = ' class="active"';
    }
}
$active = new Highlighter;

$navlinks = <<<EOD
           <li$active->about>             <a href="../about/">About Us</a></li>
           <li$active->billing>           <a href="../billing/">Billing</a></li>
           <li$active->affiliatedsystems> <a href="../affiliatedsystems/">Affiliated Sytems</a><li>
           <li$active->rates>             <a href="../rates/">Rates</a></li>
           <li$active->conservation>      <a href="../conservation/">Conservation Efforts</a></li>
           <li$active->contact>           <a href="../contact">Contact</a></li>
EOD;

echo $navlinks;

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
burnedfacelessAuthor Commented:
Always a pleasure Ray.

I'm am just beginning to learn classes and object oriented programming in PHP. I've never learned classes before so this fits in nicely.
burnedfacelessAuthor Commented:
I have one question would you recommend this code in practice?

Or should I just do the menus by hand?
Introduction to R

R is considered the predominant language for data scientist and statisticians. Learn how to use R for your own data science projects.

Ray PaseurCommented:
I would recommend it in practice.  It's possible to set up the class so it does not really need to be fully aware of all the possible links, and with a bit of generalization, it can handle new links as they are added to the script.

When you have a moment, make an E-E search for object oriented programming.  Our colleague @gr8gonzo has a couple of articles here about PHP object oriented programming that are really great foundations.
burnedfacelessAuthor Commented:
I will start object oriented tomorrow.

Thanks for responding.
Ray PaseurCommented:
There's a learning curve to object oriented code, and the semi-related matter of object-oriented design.  These are both new ways of thinking about application design and development.  They are the fruits of years of learning at the post-graduate level about computer science.  So, give yourself time to learn and practice - don't be impatient with yourself as you move into these concepts.  It will take time and experimentation.  The more you learn, the better your software will become - simpler, more elegant, reusable, testable, all things that make for quality and customer satisfaction.  It's a journey and a worthy expenditure of time and effort, I promise!
burnedfacelessAuthor Commented:
With your post in mind I have purchased Larry Ullmans object oriented PHP book.

I'm going to devote serious time to learning this because the source code has to be good and as you and the articles mention object oriented programming is glossed over.

If I don't have it enough after that I will purchase a denser book.

The articles were a great start and enlightening unfortunately to retain any of this I have to do a fair amount of work.

It seems like this is the last rudimentary programming concept I have to learn.
Ray PaseurCommented:
There are lots of good learning resources online, too.  But at the level of PHP notation, it may be simpler than it looks.

Array notation:
$arr['key'] => 'data_element';

Object notation:
$obj->key = 'data_element';

A reason to favor the object notation?  There are no required quotation marks, so it is easier to use the notation in other quoted strings with less risk of parse errors!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.