Superfish – Add active class to current menu link

Superfish is a jQuery plugin for creating drop down menu. You can download it @ GitHub – karevn / superfish.

It works well but there is no CSS class for identifying the menu item of the current page. Luckily i found a solution in StackOverflow.

The following jQuery code will find out the menu item which match the current URL and add the active class to it.

<script type="text/javascript">
var path = window.location.pathname.split('/');
path = path[path.length-1];
if (path !== undefined) {
  $("ul.sf-menu")
    .find("a[href$='" + path + "']") // gets all links that match the href
    .parents('li')  // gets all list items that are ancestors of the link
    .children('a')  // walks down one level from all selected li's
    .addClass('active');
}
</script>

 

Done =)

Reference: StackOverflow – Active links jquery superfish

Advertisements

6 thoughts on “Superfish – Add active class to current menu link”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s