Setting active class for navigation

Question

I have a separate navigation php which has a list of links and menu options:

 echo "<ul id='menu'>";
//some if loop to do the following:
    echo "<li><a href='#'>Adminstration</a>
                    <ul><li>";
            if($userm == 'R'||$userm == 'RW') {
                echo "<a href='/N.Jain/administration/usermanagement.php>User Management</a>";
                }

This file has 10 such sub-menu. What i am trying to achieve here is that if a User is on this particular page, then the menu should expand and highlight that option.

Here is my menu javascript:

function initMenu() {
  $('#menu ul').hide();
  $('#menu li a').click(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $('#menu ul:visible').slideUp('normal');
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#menu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }

Now i am trying to get the link and then set its class to active and then do something:

function markActiveLink() {
 $("#menu li ul li a").filter(function() {
  var currentURL = window.location.toString().split("/");
  return $(this).attr("href") == currentURL[currentURL.length-1];
 }).addClass("active");

if($('#menu li ul li a').hasClass('active') == true) {
    console.log('has');
 }
}

ShankarSangoli · Accepted Answer · 2012-02-16 20:42:16Z

3

attr('href') gives only the attribute value whatever you have set on the anchor href attribute. If you use href property of anchor element using prop('href') then it will give you the complete url. And then you can compare the complete url instead of spliting and trying the compare part of the url. Try this.

function markActiveLink() {
   $("#menu li ul li a").filter(function() {
      return $(this).prop("href").toUpperCase() == window.location.href.toUpperCase();
   })
   .addClass("active")
   .closest('ul')        //get the closest ul 
   .slideDown('normal'); //expand it

   if($('#menu li ul li a').hasClass('active') == true) {
        console.log('has');
   }
}

Note I am converting both the href and location to upper case just to avoid case sensitive comparison.

prop() - Gets the value of a property for the first element in the set of matched elements.

edited Feb 16, 2012 at 20:42

answered Feb 16, 2012 at 18:40

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Namit Over a year ago

This did work for me, i am able to get has in the console now, but there was some error being thrown due to toUpperCase(), so i removed it, but now how can i track which list item has the class active?

ShankarSangoli Over a year ago

toUpperCase() was failing because I used it on location object. I correct it in my answer by using it on location.href. Well you can use class selector to find the element with class "active".

Namit Over a year ago

Thanks for that, but coming back to the topic, what i want to achieve is that the active class should be expanded and displayed on the page!

Namit Over a year ago

I am sorry but which structure are you talking about here. The Second piece of code in the question above is that javascript i am using to expand and select the menu options, so thought that if i am able to detect the active class then i can define something in that class which finds the active class and then expands it.

ShankarSangoli Over a year ago

Without looking at your markup it is hard to write the correct selector.

|

Brian · Accepted Answer · 2012-02-16 18:34:31Z

1

Wouldn't it be much more efficient to use PHP to output an "active" class on the appropriate menu items as you output them? I don't understand what the circumstance is that you want to use PHP to output the menu, but JS to flag the menu item as active here...

While outputting the menu items, why not compare at that point if that is the current menu item?

function isCurrentPage( $url ) {
    if( $_SERVER['REQUEST_URI'] == $url ) return true;
    return false;
}

if($userm == 'R'||$userm == 'RW') {
   echo "<a href='/path/to_file/usermanagement.php'".(isCurrentPage('/path/to_file/usermanagement.php') ? " class=\"active\" : "" ).">User Management</a>";
}

edited Feb 16, 2012 at 18:34

answered Feb 16, 2012 at 18:26

Brian

3,02321 silver badges27 bronze badges

4 Comments

Namit Over a year ago

I am using PHP because users will have certain rights, hence not everyone can access all menu options, so i am using PHP to retrieve that information and display accordingly

Brian Over a year ago

Yes, what I meant is what I illustrated in my edit above. Why not check the URL of the link as you output it against the URL of the current page PHP is displaying. The example above is crude and meant to illustrate the idea, not be a 100% working model for you as I'm not familiar with your application. But it will get the job done without relying on JS code after the page loads to mark the current menu item.

Namit Over a year ago

I get you point, you want me to check the link of the current page and then compare them to the navigation links, and set the class as active if that is found right?

Brian Over a year ago

Right. If you're using PHP to output the links anyway, it makes more sense to run that comparison server side and output the class in the HTML returned to the browser. Using JS makes the client's computer compare the current URL to the links and set a class from there. This results in a "flash" where the menu item isn't selected as active until the onLoad JS code fires off and sets it. Plus you're making the user's computer execute JS code when you could add like 5 lines of PHP code (which is much faster time wise) to do the same work more smoothly and quickly ;)

Collectives™ on Stack Overflow

Setting active class for navigation

2 Answers 2

6 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related