修改超級魚菜單jQuery插件

Question

我想超級魚呈現菜單，使每個菜單欄有一套CSS，將允許我給每個菜單列不同的CSS屬性。 I.E.不同的文字顏色，不同的背景顏色，懸停顏色。

例如，菜單可能是

Home | About Us:Meet the Team:Why Hire Us | Contact Us:Social Media | Our Services 

其中，「關於我們」有兩個子菜單項和「聯繫我們」有一個子菜單項。

我想給他們添加樣式，以便.imMenu-Primary1 ... imMenu-PrimaryN在每個主菜單項上，它是子項目。此外，我想附加到他們的每個孩子像這樣.imMenu-Childof-Primary1 .... imMenu-Childof-PrimaryN。或者類似的東西，可以讓我爲每個主菜單項目設置風格，並將其作爲一個組進行組合。

以下是我認爲相關的Superfish文件。

預先感謝您的時間和精力，

添

附：我正在使用Wordpress生成菜單，並且不能或者不知道如何在Wordpress中漫遊菜單結構來添加CSS。我注意到，雖然超級潛艇不會走菜單樹結構，我很確定可以使用JavaScript添加CSS屬性。這就是爲什麼我建議這樣做。但是，如果有更好的方法來做到這一點，我就會全神貫注。再次感謝。

;(function($){ // $ will refer to jQuery within this closure 

$.fn.supersubs = function(options){ 
    var opts = $.extend({}, $.fn.supersubs.defaults, options); 
    // return original object to support chaining 
    return this.each(function() { 
     // cache selections 
     var $$ = $(this); 
     // support metadata 
     var o = $.meta ? $.extend({}, opts, $$.data()) : opts; 
     // cache all ul elements and show them in preparation for measurements 
     $ULs = $$.find('ul').show(); 
     // get the font size of menu. 
     // .css('fontSize') returns various results cross-browser, so measure an em dash instead 
     var fontsize = $('<li id="menu-fontsize">&#8212;</li>').css({ 
      'padding' : 0, 
      'position' : 'absolute', 
      'top' : '-999em', 
      'width' : 'auto' 
     }).appendTo($$)[0].clientWidth; //clientWidth is faster than .width() 
     // remove em dash 
     $('#menu-fontsize').remove(); 
     // loop through each ul in menu 
     $ULs.each(function(i) { 
      // cache this ul 
      var $ul = $(this); 
      // get all (li) children of this ul 
      var $LIs = $ul.children(); 
      // get all anchor grand-children 
      var $As = $LIs.children('a'); 
      // force content to one line and save current float property 
      var liFloat = $LIs.css('white-space','nowrap').css('float'); 
      // remove width restrictions and floats so elements remain vertically stacked 
      $ul.add($LIs).add($As).css({ 
       'float' : 'none', 
       'width' : 'auto' 
      }); 
      // this ul will now be shrink-wrapped to longest li due to position:absolute 
      // so save its width as ems. 
      var emWidth = $ul[0].clientWidth/fontsize; 
      // add more width to ensure lines don't turn over at certain sizes in various browsers 
      emWidth += o.extraWidth; 
      // restrict to at least minWidth and at most maxWidth 
      if (emWidth > o.maxWidth)  { emWidth = o.maxWidth; } 
      else if (emWidth < o.minWidth) { emWidth = o.minWidth; } 
      emWidth += 'em'; 
      // set ul to width in ems 
      $ul.css('width',emWidth); 
      // restore li floats to avoid IE bugs 
      // set li width to full width of this ul 
      // revert white-space to normal 
      $LIs.css({ 
       'float' : liFloat, 
       'width' : '100%', 
       'white-space' : 'normal' 
      }) 
      // update offset position of descendant ul to reflect new width of parent. 
      // set it to 100% in case it isn't already set to this in the CSS 
      .each(function(){ 
       var $childUl = $(this).children('ul'); 
       var offsetDirection = $childUl.css('left') !== undefined ? 'left' : 'right'; 
       $childUl.css(offsetDirection,'100%'); 
      }); 
     }).hide(); 

    }); 
}; 
// expose defaults 
$.fn.supersubs.defaults = { 
    minWidth  : 9,  // requires em unit. 
    maxWidth  : 25,  // requires em unit. 
    extraWidth  : 0   // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off  values 
    }; 

})(jQuery); 

Answer 1

沒有必要修改超級魚。您只需將類添加到菜單標記中，然後在CSS文件中對其進行設置。 Superfish不控制CSS，它只擴展標準CSS下拉菜單的功能。

例如，如果您的標記看起來像這樣你可以添加一些新的類，你<li>標籤：

<ul> 
    <li class="home"><a href="#">Home</a></li> 
    <li class="about"> 
     <a href="#">About Us</a> 
     <ul> 
      <li><a href="#">Meet the Team</a></li> 
      <li><a href="#">Why Hire Us</a></li> 
     </ul> 
    </li> 
</ul> 

然後，只需使用類中添加相應的樣式你的CSS。

我注意到你沒有使用超級魚，但實際上是supersubs。這不應該是必要的，看到在http://users.tpg.com.au/j_birch/plugins/superfish/examples/supersubs/