Superfish高亮顯示當前頁面的菜單項

Superfish是一個不錯的jQuery下拉菜單插件,被廣泛用於各種網站項目，但是其一個顯著不足是無法爲當前頁面的菜單項添加高亮顯示效果，本文將介紹如何解決這個問題。

關鍵字：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官方網站：http://users.tpg.com.au/j_birch/plugins/superfish/options/

當用於獨立項目的時候，就需要考慮爲當前頁面的菜單項目添加高亮效果

需要添加的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的話，去掉上面代碼中第七行最前面的註釋符號即可。