Hi Fellows,
I am working on a website project. I need to create a scrolling upside navigation buttons. Please visit
This website has navigation buttons, when user hover mouse over the button, the button start scrolling upside and when user move the mouse to other button then previous button start scrolling downward.
I am using css/xhtml and thinking to use animated gif files for hover effect. Can anyone give me any idea to complete this task please.

Hafeez Ansari.

7 Years
Discussion Span
Last Post by EvolutionFallen

I suppose you could make a GIF with that animation. Use the original image for the normal picture, and then use a CSS :hover to change the image when the mouse is moved over it to the animated GIF.

Personally though I'd recommend using jQuery for this, but you'd need to learn some JavaScript for that. I'm only just starting to get into jQuery, so I don't think I can shed much light on that option at this time. But from what I've seen of examples like this, jQuery seems the way to go. If you want some examples that you may be able to use to adapt to your needs, you could try the jQuery tutorials at Build Internet! or webitect:
Webitect's jQuery for Beginners Tutorial
Build Internet!'s Animated Postcard Tutorial


Thank You "EvolutionFallen " for your reply. But i've solved the problem using jQuery.


Cool! =)
Care to share your code, or the website it's on? Like I said, I'm just starting to learn jQuery so I like to see how different things are done.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.