Need Auto Rollover Animation For Wordpress Navigation (Example Inside)

Hi all,

I've been trying to find a solution but everything seems to lead to flash, which is a no go area for me.

Please view gif file below, this will probably make more sense.

Example - http://i54.tinypic.com/axyxw6.gif

I wanted to animate the sub navigation menu on my wordpress blog by having an arrow cycle through automatically without user action, each of the links in the sub navigation so an arrow would appear next to the first link then appear on the next, and the next until it reached the end, then it would start at the begining again.

It might look good if user were to move the mouse over a link the animation stopped.

Please help. Thank You

 

You will need to use javascript to accomplish this effect. It's definietly possible, but I don't have time atm to look for what you need. This is the closest thing I could find: http://www.flooble.com/scripts/animate.php but it will need to be tweaked to your needs. Otherwise maybe try www.dynamicdrive.com

 

You could always have a series of animated gif's with each button in the sequence set to start after a progressively longer delay before returning to the start. It's a bit crude, but it could certainly achieve the effect you are after.

 

Thanks GWiz, this looks promising, if I use text symbol arrows eg → » ⇨ then colouring them blue like the background would make them invisible, then they could turn white and become visible. I hope this won't have a negative effect on SEO =/

Yeh I had thought about that, but it gets complicated when there are different submenus for different pages.

 

what about having one long animated gif for the whole menu and then having all the rollover effects on different levels?

Basically you could set the background position of the various hover states according to what menu link is being rolled over? At least it only requires one gif file then?

Might work with a bit more planning?..

 

that would be a lot of work if I lots of parent pages.

 

Some JS should do the trick, but I do not see the sense with that annoying effect

LOL @ your portfolio ^^ (had to laugh about all that medical sites coded with DreamWeaver and tons of tables for the layout

 

Client is adamant about it, so I shall deliver arrows

lmao yeh those medical ones are about 4 years old when I first started out, I'm strictly wordpress now

 

And WP is strictly non-valid (X)HTML (in 99 of 100 cases)

 

@larsonk22

A) I 100% agree with @csm on his posts ( both of them... lol.. )

B) Client being adamant about an utter atrocity is ridiculous. It's your job as the designer/developer to know when to say NO... Would you seriously be happy having your name on that with that SUPER ANNOYING menu blinking like that??...

C) Javascript or a fixed with gif animation is the only way you are going to achieve this... As for your concern over SEO... The tables and non compliance of the code being used everywhere within the site will take more precedence than the JS needed to create the effect you are looking for.

I'm not being harsh here nor am I trying to offend you. The harsh truth is that when the project is done, users will tell your client that the menu thing is ANNOYING and his position will change and you will have to remove it anyway... So save the grief, show them some opinions even if from this forum, and change their mind for them....

You have to pick and choose your battles with clients and this is one to pick... For user experience it will be a disaster ===> Like the the annoying blinking banner that drives you nuts when trying to read an article...


I think, as in past threads, @csm will agree with me on this one...

Cheers!~

 

Thanks guys I understand your point, I had suggested to just use a different colour background for the submenus, I will relay your comments to the client. Thanks for the constructive criticism, much appreciated.

 

100%, my friend