I have a customer who wants their menu to have some reasonably simple menu rollovers. You can see the rollover in 10 frames here from top to bottom. It should play through these 10 frames on rollover and on mouse out, sometime similar in reverse.

I'm wondering if there another way to do this other than with Flash, maybe JavaScript?

Edit: Since there is some confusion as to what I want to do, click here to see the original design built in Flash--rollover the menu. Notice how the bar comes up from blow and then rests under the text.

3 answers

6
points

You could combine your images into an animated gif and fade them in and out with jQuery.

example here: jQuery-menu-with-animated-gif-image-for-rollovers

Answered almost 8 years ago by Tony Crockford
  • What's wrong with this answer? Tony Crockford almost 8 years ago
  • Since there's no way to stop a GIF, how would you recommend stopping the animation once it's gotten to the 10th frame? Darryl Hein almost 8 years ago
  • I'd have animated gif in, fade it out to show static background then on mouse out fade in the reverse animated gif. Tony Crockford almost 8 years ago
  • I just checked, as it's been a long time since I used an animated gif, but they don't have to loop. you can have ten frames to a static image... Tony Crockford almost 8 years ago
3
points

An easy way of doing it is with CSS animations, but for the moment they only work with WebKit browsers like Safari and Chrome.

Assuming for a moment that your menu has this example markup:

<ul>
<li>Menu Item<span></span></li>
</ul> 

Here's the CSS you'd need:

li {  
list-style-type:none;  
position:relative;  
width:109px;  /* Gives the li the same height and width as the first frame */  
height:46px;  
background:url('http://www.szkolazdusza.com/images/menu-item01-bkg.jpg') top left no-repeat;  
text-indent:-10000px;  /*Hides the menu item text way to the left*/  
}  

li span {  /* Places the span of the same dimensions right on top of the li */  
display:block;  
width:109px;  
height:46px;  
position:absolute;  
top:0;  
left:0;  
background:url("http://www.szkolazdusza.com/images/menu-item01-bkg.jpg") 0 -414px no-repeat;  /* Offsets the image 414px to the top, so it's actually the last frame in the image */  
z-index:1;  
opacity:0; /* Makes it transparent until you hover over it */   
filter:alpha(opacity = 0);  /* For IE compatibility; it doesn't support opacity */  
-webkit-transition: opacity 0.25s linear;  /* Tells WebKit how you want the transition */  
}  

li span:hover {  /* Makes the span visible when you hover it, animated according to the -webkit-transition property */  
filter: alpha(opacity = 100);  
opacity:1;  
} 

Although it only works in WebKit, it degrades fine in other browsers: the image still changes on hover, it just isn't animated. I realize this isn't good enough for many clients, but I'll leave the exercise of doing it with JavaScript to someone else. Still, I think it's worth considering.

I pasted the entire example code at GitHub, if you want to check it out.

Answered almost 8 years ago by Guillermo Esteves
  • Just to note, Firefox (and other Gecko browsers) support transitions now, via -moz-transition. Olly Hodgson almost 8 years ago
  • Really nice answer - and yes, using -moz-transition will make it work in newer builds of Firefox. Rich Bradshaw almost 8 years ago
  • I did not know that. Thanks! Now if you'll excuse me, I have a bunch of sites to update, haha. Guillermo Esteves almost 8 years ago
  • I'd check the syntax for the moz version - a few properties are different between webkit and gecko. Rich Bradshaw almost 8 years ago
  • Too bad only 20% of visitors to the site are using FF or a WebKit browser. Darryl Hein almost 8 years ago
danwellman 5600
3
points

You could use jQuery UI to do a class transition from one text color to the other on mouseover, and then back again on mouseout, something like:

$("li a").hover(function() {
  $(this).animate({
    color:"yellow"
   });
}, function() {
  $(this).animate({
    color:"white"
   });
});

Where the first anonymouse function is executed on mouseover, and the second anonymous function executed on mouse out. Or if simply changing color is not enough, you can transition between whole classes using something like:

$("li a").hover(function() {
  $(this).switchClass("existingclass", "newclass", 2000);
}, function() {
  $(this).switchClass("existingclass", "newclass", 2000);
});

The animate function is available in standard jQuery, jQuery UI just makes the transformation between colors much smoother and more animated.

You can pretty much do anything with JavaScript that you would do with Flash

Answered almost 8 years ago by danwellman
  • There is more going on than just colour changing and they want the animation of the bar moving up as well. Darryl Hein almost 8 years ago
  • Using color in the example above was to keep the code snippet short, as well as changing the color, you can transition between many CSS styles at once. Or you can transition between entire classes as with the second snippet danwellman almost 8 years ago
  • I use animation for rollovers in the nav on my own site - www.danwellman.co.uk - the effect is basic, but it could easily be extended to do a lot more than just animate the height danwellman almost 8 years ago