Superfish高亮显示当前页面的菜单项

Superfish是一个不错的jQuery下拉菜单插件,被广泛用于各种网站项目，但是其一个显著不足是无法为当前页面的菜单项添加高亮显示效果，本文将介绍如何解决这个问题。

关键字：Superfish菜单高亮、Superfish高亮显示当前页面的菜单项、Superfish高亮。

superfish的使用很简单，其参数如下：

1. $.fn.superfish.defaults = {   
2.   popUpSelector: 'ul,.sf-mega',      // selector within menu context to define the submenu element to be revealed  
3.   hoverClass:    'sfHover',          // the class applied to hovered list items  
4.   pathClass:     'overideThisToUse', // the class you have applied to list items that lead to the current page  
5.   pathLevels:    1,                  // the number of levels of submenus that remain open or are restored using pathClass  
6.   delay:         800,                // the delay in milliseconds that the mouse can remain outside a submenu without it closing  
7.   animation:     {opacity:'show'},   // an object equivalent to first parameter of jQuery’s .animate() method. Used to animate the submenu open  
8.   animationOut:  {opacity:'hide'},   // an object equivalent to first parameter of jQuery’s .animate() method Used to animate the submenu closed  
9.   speed:         'normal',           // speed of the opening animation. Equivalent to second parameter of jQuery’s .animate() method  
10.   speedOut:      'fast',             // speed of the closing animation. Equivalent to second parameter of jQuery’s .animate() method  
11.   cssArrows:     true,               // set to false if you want to remove the CSS-based arrow triangles  
12.   disableHI:     false,              // set to true to disable hoverIntent detection  
13.   onInit:        $.noop,             // callback function fires once Superfish is initialised – 'this' is the containing ul  
14.   onBeforeShow:  $.noop,             // callback function fires just before reveal animation begins – 'this' is the ul about to open  
15.   onShow:        $.noop,             // callback function fires once reveal animation completed – 'this' is the opened ul  
16.   onBeforeHide:  $.noop,             // callback function fires just before closing animation – 'this' is the ul about to close  
17.   onHide:        $.noop,             // callback function fires after a submenu has closed – 'this' is the ul that just closed  
18.   onIdle:        $.noop,             // callback function fires when the 'current' submenu is restored (if using pathClass functionality)  
19.   onDestroy:     $.noop              // callback function fires after the 'destroy' method is called on the menu container  
20. };  

以上参数列表及说明来自superfish官方网站：http://users.tpg.com.au/j_birch/plugins/superfish/options/

当用于独立项目的时候，就需要考虑为当前页面的菜单项目添加高亮效果

需要添加的javascript代码：

1. var path = window.location.pathname.split('/');   
2. path = path[path.length-1];   
3. if (path !== undefined) {   
4.   $(".sf-menu")   
5.     .find("a[href$='" + path + "']") // gets all links that match the href  
6.     .parents('li')  // gets all list items that are ancestors of the link  
7.    // .children('a')  // walks down one level from all selected li's  
8.     .addClass('current');   
9. }  

 

上面的javascript代码是将预定义好的高亮效果（上例中的红色字体，带下划线）添加给li，如果想添加给a的话，去掉上面代码中第七行最前面的注释符号即可。