Member Avatar for ansaripk

Hi Fellows,
I am working on a website project. I need to create a scrolling upside navigation buttons. Please visit
http://www.kingston.ac.uk/
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.

Regards
Hafeez Ansari.

  • 2 Contributors
  • 3 Replies
  • 105 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by EvolutionFallen
Member Avatar for 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

Member Avatar for ansaripk

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

Member Avatar for EvolutionFallen

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.