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