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
Eureka! 
This solution doesn’t seems to work for me. Where exactly you have put this piece of code ? In your HTML file or JS file?
LikeLike
In HTML
Have you included the jQuery lib?
LikeLike
This only works if all web pages are under the root of the project. If you nest pages within folders then this doesn’t work.
ie http://xxx.domain.com/default.html (works)
http://xxx.com/firm/about.html (does not work_
LikeLike
How about this?
var $this; $("ul > li").each(function(){ $this = $(this); if($this.find("> li.active").length) $this.addClass("active"); }Reference: StackOverflow – Superfish plugin tweak – adding a ‘current’ class to a parent li element too
LikeLike
This works for me, But is there a way to get the sub menu to auto expand if the page is active?
LikeLike
Can this script also expand the sub categories if the url is matched
LikeLike