Animated Rollover Arrow

Another disjointed Rollover effect that animates a menu pointer as you scroll along the horizontal menu. There are no animated gifs used in this demo and the movement is purely in css. Although I wouldn't recommend that you use this method in its entirity it could be used in small doses for interesting effects.

Roll your mouse over the links in the menu below and then scroll from one end to the other to see the demonstration in action.

As you can see the display is a little jumpy in IE6 but looks pretty good in firefox. We can make it a bit smoother in IE by using images for the text links instead and that gets rid of some of the jumping. The example below uses this method.

The above effects are in fact quite simple and just relies on using loads of anchors that are spaced 10px apart and as you hover over each one the left position of auto is used to slide a nested span along the top. The techniques are explained in the other disjointed demo.

Its not really a very efficient way to do this and is really just an experiment in css. Javscript would be a more suitable alternative in this case.