Animating a Flashing Rollover

A freeway user was asking about flashing rollover effects like those found at the site www.vectorbox.es. Now the effects on that site appear to be Flash based, but I really couldn't see a reason why ordinary CSS and a simple animated gif couldn't do the trick.

First, make a menu. I still think unordered list menus are appropriate and within the grasp of most Freeway users to make. For more on CSS List Menus visit the Listamatic website, or see my previous discussions here, and hereHere too.

Once you have an unordered list of links, use the CSS editor to set padding around them, especially to the left side. Next we'll use Photoshop to make and animate the image of a flashing bullet. If you don't have Photoshop, or have some different graphic program, then you'll have to translate this part.

In Photoshop create a new image 30px tall by 500px wide — I wasn't trying to be precise or anything, just looking to give myself enough room. There's likely a mathmatical way to be more efficient with the size, so don't feel constrained by my measurements.

Usethe type tool to create a "bullet" symbol (option-8 for me) size and color it, then place it at the left side of the image centered vertically. Then duplicate its layer (command–j for me) and drag it over to the right side of the image and change its color.

Next bring up Photoshop's Animation palette (older Photoshop users need the separate ImageReady application) and duplicate the frame. In the second frame I then click off the visibility of the second bullet, so when I preview the animation the first bullet appears static while the second one flashes on and off. Then Save for Web as a gif file.

In Freeway, edit the link style for your menu (ul.navmenu li a in mine) and add the gif as a background image with no repeat. Then add the background-position attribute through the Extended window to define its position behind the link (see now why I made it so wide?).

By altering the background-position attribute between the a and hover states, I can shift from the "static" part of the image to the "flashing" part. It's not as smooth as the flash menu (sometimes the flashing seems to hang up on me). But it's easy and looks cool.