將jquery添加到WordPress菜單

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');     
    }); 
}