Adding Jquery to WordPress Menu -
i have demo site set located @ http://www.threecell.com/demo. currently, fadein rollover state menu set using css3. i'm hoping assistance using jquery duplicate animation effect site displayable in ie9.
i'll honest in saying i'm unsure simplest , best jquery script use seemingly simple this. code attempted use needed on integrating existing wordpress theme. in area appreciated.
var hovercolour = "green"; $(function(){ $("a.hoverbtn").show("fast", function() { $(this).wrap("<div class=\"hoverbtn\">"); $(this).attr("class", ""); }); //display hover div $("div.hoverbtn").show("fast", function() { //append 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 background $(this).parent().children("div") .stop() .css({"display": "none", "opacity": "1"}) .fadein("slow"); //fade colour $(this) .stop() .css({"color": $(this).attr("rel")}) .animate({"color": hovercolour}, 350); },function(){ //fade out background $(this).parent().children("div") .stop() .fadeout("slow"); //fade colour $(this) .stop() .animate({"color": $(this).attr("rel")}, 250); }); }); });
the style script located below:
.hoverbtn { position: relative; float: left; background: black url(images/navbg.png) repeat-x 0 0 scroll; } .hoverbtn { 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; }
again, i'm open using script works. scripts above posted in 2009 while may still work, don't mind using what's date. thanks,
you can use function menu in wordpress site.
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'); }); }
Comments
Post a Comment