WordPress 메뉴에 Jquery 추가

Question

http://www.threecell.com/demo에 위치한 데모 사이트를 설정했습니다. 현재 메뉴의 페이드 인 롤오버 상태는 CSS3를 사용하여 설정됩니다. Jquery를 사용하여 애니메이션 효과를 복제하여 IE9에서 사이트를 표시 할 수 있도록 도움을 받기를 희망합니다.

솔직히 말해서 나는 이것과 같이 단순한 것처럼 사용할 수있는 가장 단순하고 최고의 Jquery 스크립트에 대해 확신 할 수 없다. 이것은 내가 사용하려고 시도했지만 궁극적으로 기존 WordPress 테마와 통합하는 데 도움이 필요한 코드입니다. 이 분야에 도움을 주시면 감사하겠습니다.

var hoverColour = "green"; 

$(function(){ 
    $("a.hoverBtn").show("fast", function() { 
     $(this).wrap("<div class=\"hoverBtn\">"); 
     $(this).attr("class", ""); 
    }); 

    //display the hover div 
    $("div.hoverBtn").show("fast", function() { 
     //append the background div 
     $(this).append("<div></div>"); 

     //get link's size 
     var wid = $(this).children("a").width(); 
     var hei = $(this).children("a").height(); 

     //set div's size 
     $(this).width(wid); 
     $(this).height(hei); 
     $(this).children("div").width(wid); 
     $(this).children("div").height(hei); 

     //on link hover 
     $(this).children("a").hover(function(){ 
      //store initial link colour 
      if ($(this).attr("rel") == "") { 
       $(this).attr("rel", $(this).css("color")); 
      } 
      //fade in the background 
      $(this).parent().children("div") 
       .stop() 
       .css({"display": "none", "opacity": "1"}) 
       .fadeIn("slow"); 
      //fade the colour 
      $(this) .stop() 
       .css({"color": $(this).attr("rel")}) 
       .animate({"color": hoverColour}, 350); 
     },function(){ 
      //fade out the background 
      $(this).parent().children("div") 
       .stop() 
       .fadeOut("slow"); 
      //fade the colour 
      $(this) .stop() 
       .animate({"color": $(this).attr("rel")}, 250); 
     }); 
    }); 
}); 

이 스크립트의 스타일이 아래에 있습니다 : 다시

.hoverBtn { 
    position:  relative; 
    float:   left; 
    background:  black url(images/navBG.png) repeat-x 0 0 scroll; 
} 
.hoverBtn a { 
    position:  relative; 
    z-index:  2; 
    display:  block; 
    width:   100px; 
    height:   30px; 
    line-height: 30px; 
    text-align:  center; 
    font-size:  1.1em; 
    text-decoration: none; 
    color:   blue; 
    background:  transparent none repeat-x 0 0 scroll; 
} 
.hoverBtn div { 
    display:  none; 
    position:  absolute; 
    z-index:  1; 
    top:   0px; 
    background:  white url(images/navHover.png) repeat-x 0 0 scroll; 
    color: black; 
} 

, 나는 작동 모든 스크립트를 사용하여 열려있어. 위의 스크립트는 2009 년에 다시 게시되었으므로 여전히 작동 할 수 있지만 가장 최신의 것을 사용하는 데 신경 쓰지 않습니다. 감사합니다,

Answer 1

이 기능은 WordPress 사이트의 메뉴에 사용할 수 있습니다.

function home_top_menu() 
{ 
    var currentParent = ''; 
    var pos = ''; 
    jQuery("#.menu ul").css({display: "none"}); // Opera Fix 
    jQuery(".menu li").hover(function(){ 
     jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268); 
      },function(){ 
      jQuery(this).find('ul:first').css({visibility: "hidden"}); 
    }); 
    jQuery(".menu .sub-menu").hover(function(){ 
     currentParent = $(this).parent('li').attr('class'); 
     pos = currentParent.indexOf('current-menu-parent',0); 
     $(this).parent('li').addClass('current-menu-parent'); 
    },function(){ 
     if(pos == '-1') 
     $(this).parent('li').removeClass('current-menu-parent'); 
    }); 
    jQuery('#accessMenu ul.menu li a').hover(function(){ 
     jQuery(this).css('background','none'); 
     jQuery(this).find('span').css('background','none');     
    }); 
}