Nice CSS Menu Item Trick

I ran across an interesting post from Petr Stanicek at wellstyled.com called Fast Rollovers Without Preload.  The site itself is interesting, as it is a blog that is written and displayed in both English and Czech.  Nice trick in itself.

The CSS trick allows you to use a single image to contain all of the behaviors for menu items.  You then use CSS to “move” the image to display the “right” part of it based on the behavior (hover, active, etc.).  Be sure to read the Update to see how to avoid some flickering behavior in IE.  This looks like it might work well in SharePoint, as the trick works with background images, which SharePoint is already using.  I’m going to try it the next time it makes sense to do so.

Similar Posts

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.