Hello Guest
No Avatar
Sign In to Remove
Posts: 
62
Reputation: 
9
Posted: April 11, 2011, 12:42 AM  -- Last Edit: April 11, 2011, 12:48 AM by agent47
  • Group: Member
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.
Posts: 
400
Reputation: 
20
Posted: April 11, 2011, 6:11 AM
  • Group: Administrator
  • AIM: mlm@visualpulse.net
  • deviantART: MadLittleMods
  • Photobucket: MadLittleMods
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)
 :css:
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:
 :css:
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);
}
<3 Nerve, Sk8, Labradoodle, Austin
Posts: 
62
Reputation: 
9
Posted: April 11, 2011, 3:37 PM
  • Group: Member
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.
Posts: 
400
Reputation: 
20
Posted: April 12, 2011, 2:07 AM
  • Group: Administrator
  • AIM: mlm@visualpulse.net
  • deviantART: MadLittleMods
  • Photobucket: MadLittleMods
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.
<3 Nerve, Sk8, Labradoodle, Austin
Posts: 
62
Reputation: 
9
Posted: April 12, 2011, 2:38 AM
  • Group: Member
I just copy and paste this EXACT code to my CSS file, yeah?

 :css:
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);
}
Posts: 
400
Reputation: 
20
Posted: April 12, 2011, 2:53 AM
  • Group: Administrator
  • AIM: mlm@visualpulse.net
  • deviantART: MadLittleMods
  • Photobucket: MadLittleMods
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
<3 Nerve, Sk8, Labradoodle, Austin
Posts: 
400
Reputation: 
20
Posted: April 12, 2011, 4:03 AM
  • Group: Administrator
  • AIM: mlm@visualpulse.net
  • deviantART: MadLittleMods
  • Photobucket: MadLittleMods
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;
<3 Nerve, Sk8, Labradoodle, Austin
Posts: 
62
Reputation: 
9
Posted: April 15, 2011, 12:07 PM
  • Group: Member
Wow it worked! Amazing dude. Thanks for your awesome help :) You're da best....
anything