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

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -