jQuery addClass to menu items based on URL (WordPress persistant Network menu)

0 Views

I am trying to setup a persistant Network-wide menu on a WordPress multi-site install. This was achieved using the Network wide menu plugin and works very well. The only issue is styling because the automatic “current-menu-item” class is only embedded into the appropriate menu link when on the main blog.

So i’ve looked into the .addClass() function to get the classes added to the menu items based on the current URL and this is what i’ve come up with so far. Keep in mind that I am also trying to have the parent items highlighted as well which is why I also used the .parentsUntil() class.

Read More

This is my network setup (each domain corresponding to one instance of WordPress): 

domain.com  
blog1.domain.com  
blog1.domain.com  
blog1.domain.com

This is my jQuery code : 

jQuery(function() {
jQuery('#megaUber ul li').removeClass('activeMenu');
var href = window.location.href;
if (href.indexOf('http://domain.com) != -1) {
    jQuery('#megaUber a').parentsUntil('.ss-nav-menu-item-depth-0').addClass('activeMenu');
} else if (href.indexOf("http://blog1.domain.com") != -1) {
    jQuery('#megaUber li a[href="'+href+'"]').parentsUntil('.ss-nav-menu-item-depth-0').addClass('activeMenu');
} else if (href.indexOf("http://blog2.domain.com") != -1) {
    jQuery('#megaUber li a[href="'+href+'"]').parentsUntil('.ss-nav-menu-item-depth-0').addClass('activeMenu');
} else if (href.indexOf("http://blog3.domain.com") != -1) {
    jQuery('#megaUber li a[href="'+href+'"]').parentsUntil('.ss-nav-menu-item-depth-0').addClass('activeMenu');
}
});

HTML Menu Markup 

<div id="megaMenu">
<ul id="megaUber" class="megaMenu" data-theme-location="primary">
 <li id="menu-item-20" class="nav-cgroupe menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor mega-with-sub ss-nav-menu-item-1 ss-nav-menu-item-depth-0 ss-nav-menu-mega ss-nav-menu-mega-alignCenter ss-nav-menu-with-desc">
  <a href="http://domain.com">domain.com</a>
   <ul class="sub-menu sub-menu-1" style="display: none;">
    <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page ss-nav-menu-item-depth-1">
     <a href="http://domain.com/link1">Link1</a>
    </li>
    <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page ss-nav-menu-item-depth-1">
     <a href="http://domain.com/link2">Link2</a>
    </li>
    <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page ss-nav-menu-item-depth-1">
     <a href="http://domain.com/link3">Link3</a>
    </li>
   </ul>
  </li>
  <li id="menu-item-26" class="nav-cconseil menu-item menu-item-type-custom menu-item-object-custom mega-with-sub ss-nav-menu-item-2 ss-nav-menu-item-depth-0 ss-nav-menu-mega ss-nav-menu-mega-alignCenter ss-nav-menu-with-desc">
   <a href="http://blog1.domain.com">blog1.domain.com</a>
    <ul class="sub-menu sub-menu-1" style="display: none;">
     <li id="menu-item-53" class="menu-item menu-item-type-custom menu-item-object-custom ss-nav-menu-item-depth-1">
      <a href="http://blog1.domain.com/link1">Link1</a>
     </li>
     <li id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom ss-nav-menu-item-depth-1">
      <a href="http://blog1.domain.com/link2">Link2</a>
     </li>
     <li id="menu-item-55" class="menu-item menu-item-type-custom menu-item-object-custom ss-nav-menu-item-depth-1">
      <a href="http://blog1.domain.com/link3">Link3</a>
     </li>
    </ul>
   </li>
  </ul>
</div>

I’ve twisted this many different ways and just can’t get it right… Does anybody know how to achieve this?

Thank you,
C.

Post Views: 0

Related posts

Leave a Reply

1 comment

  1. Try this:

    $('#megaUber li a').filter(function () {
    return this.href && this.href == location.href;
}).parentsUntil('.ss-nav-menu-item-depth-0').addClass('activeMenu');

    The second line filters the set of elements by two criteria:

    1. They must have a href attribute with a domain name (this.hostname).

    2. The domain name that they link to (again, this.hostname) must match
      (==) the domain name of the current page (location.hostname).

    UPDATE

    $('#megaUber > li > a').filter(function () {
    return this.href && this.href == location.href.slice(0, -1);
}).parentsUntil('.ss-nav-menu-item-depth-0').addClass('activeMenu');