수정 Superfish 메뉴 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과 같은 것을 추가하고 싶습니다. 아니면 기본 메뉴 항목을 스타일링 할 수있는 유사한 기능을 제공합니다.

아래는 내가 생각하는 슈퍼 피쉬 파일입니다.

는

팀에게, 당신의 시간과 노력에 대한 사전에

추신 : 감사합니다 나는 Wordpress를 사용하여 메뉴를 생성하고 있으며, CSS를 추가하기 위해 Wordpress 내에서 메뉴 구조를 어떻게 움직이는 지 알지 못하거나 오히려 몰랐습니다. 그 슈퍼 하위 있지만 메뉴 트리 구조를 걸어 꽤 CSS 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에 해당 스타일을 추가합니다.

나는 당신이 수퍼 피쉬를 사용하지 않고 실제로는 수퍼 셋을 사용하고 있음을 확인합니다. 더 이상 필요하지 않습니다. http://users.tpg.com.au/j_birch/plugins/superfish/examples/supersubs/의 메모를 참조하십시오.