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
  • 129 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by EvolutionFallen

Dani AI

Generated

This thread raises the familiar UI pattern of a nav item that "slides up" on hover. originally asked about it and mentioned image/JS options. Below are compact, practical approaches and pitfalls to keep in mind so the effect is smooth, accessible, and easy to maintain.

A CSS-first solution is simplest and performs best (GPU-accelerated transforms, fewer HTTP requests). The structure uses an inline element inside each link and shifts it with transform on hover/focus:

/* basic structure */
.nav li { display:inline-block; overflow:hidden; height:40px; }
.nav a { display:block; height:40px; line-height:40px; text-decoration:none; }
.nav .label { display:block; transition: transform 180ms ease; transform: translateY(0); }

/* trigger on hover or keyboard focus */
.nav li:hover .label,
.nav li:focus-within .label { transform: translateY(-12px); }

If granular timing or older-browser fallbacks are required, a small JS layer can add/remove a class (or animate top/margin-top) while ensuring events cover mouse and keyboard:

$('.nav li')
  .on('mouseenter focusin', function(){ $(this).addClass('is-hover'); })
  .on('mouseleave focusout', function(){ $(this).removeClass('is-hover'); });

Then let CSS handle the transition for smoother rendering.

Troubleshooting & accessibility notes: avoid relying on hover for essential actions; enable the effect only on hover-capable pointers with @media (hover: hover) and (pointer: fine); respect prefers-reduced-motion to disable animations for users who request it; keep focus outlines or provide visible :focus styles; prefer CSS transforms over animated GIFs for performance and crispness; and preload icons/sprites to prevent jumps. For more on transforms and motion preferences see the MDN docs: CSS transform and prefers-reduced-motion.

Recommended Answers

All 3 Replies

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 or :

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.