Hey guys,

I require some assistance with my site in implementing this jQuery animated menu as I'm a UTTER noob at coding regardless of what coding it may be.
Here's a link to what I need help with: http://www.shopdev.co.uk/blog/animated-menus-using-jquery/

Here's a pastebin of my index.template.php file | http://pastebin.com/4M5CDXUC

Would someone be generous enough to assist me with this please.
My site url: http://www.superheroalliance.net


Thanks in advance.

You can actually do this without jquery or any javascript. I actually use this technique for vp's nav bar. Post back if you have further questions 

Add this to your css to the li or whatever you have the background change on. But do not put on the hover one! (look at example below if confused)
 

Code: [Select]

-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;


EXAMPLE:
 

Code: [Select]

.my_tab
{
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}

.my_tab:hover
{
background: url(my_image.png);
}


Okay so if those lines of code go to the css file what goes into index.template.php ?
Like I said bro I'm a total noob.

Nothing I viewed your set up and i think you already got your nav bar images set up etc.

That code should add the effect just as that jquery would of.

I just copy and paste this EXACT code to my CSS file, yeah?

 

Code: [Select]

.my_tab
{
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}

.my_tab:hover
{
background: url(my_image.png);
}

no no.

That is just the basic set up and you need to add the css transition code to your tab class.

It is something along the lines of (not exacty but should be close)

Code: [Select]

#sfmenu li a


Find these tags and replace the contents accordingly:

#sfmenu li a

Code: [Select]

display: block;
line-height: 53px;
padding: 0 16px;
color: #f3f3f3;
text-shadow: 0 1px 0 #1d1d1d;
font-size: 12px;

-webkit-transition: all 0.6s linear;
-moz-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
transition: all 0.6s linear;

#sfmenu li a:hover, #sfmenu li:hover a, #sfmenu li.sfhover a

Code: [Select]

background-color: #393c41;
color: #ddd;
text-decoration: none;
text-shadow: 0 1px 0 #1d1d1d;


Wow it worked! Amazing dude. Thanks for your awesome help You're da best....