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

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

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

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

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

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

以上参数列表及说明来自superfish官方网站：

当用于独立项目的时候，就需要考虑为当前页面的菜单项目添加高亮效果了，未添加前的效果（点小图看大图）：

Superfish高亮显示当前页面的隔膜泵厂家菜单项

 

添加后的效果（点小图看大图）：

Superfish高亮显示当前页面的菜单项需要添加的javascript代码：

    var path = window.location.pathname.split('/');   
    path = path[path.length-1];   
    if (path !== undefined) {   
      $(".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('current');   
    }  

 

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

    $(function(){   
        var loc = location.href;   
        var file = loc.substring(loc.lastIndexOf("/")+1,loc.length);   
        $('a[href$="'+file+'"]').addClass('current');   
    });  

以下两种方式未测试：

         

        var url = window.location.href;   

          

        // Will only work if string in href matches with location   

        $('.menu a[href="'+ url +'"]').addClass('active');   

          

        // Will also work for relative and absolute hrefs   

        $('.menu a').filter(function() {   

            return this.href == url;   

    }).addClass('better-active');  

Superfish正确的使用方法，截止2014.01.06,没发现有正确的（谷歌和百度集体失声了），我公布下吧：

假如你的菜单的ul的class="sf-menu"，那么：

    $(function(){   
    $('.sf-menu').superfish({hoverClass:'current',pathClass:'current',});   
    var path = window.location.pathname.split('/');   
    path = path[path.length-1];   
    if (path !== undefined) {   
        $("ul.sf-menu").find("a[href$='"+path+"']").parents('li').addClass('current');   
        }   
    });  

之所以说是正确的使用方法，是因为superfish官方从Superfish v1.4.8-v1.7.4，都不能高亮显示当前页面在菜单中的菜单项，总之，是不能高亮显示，所以需要上面代码中第3-第7行的额外的代码。
你需要事先定义好.current，也就是当前页面在菜单中的正确样式。