Spicing Up Your Navigation Menu With CSS3

Do you remember those days when we used nasty JavaScript libraries with onMouseOver effects for “advanced” navigation menus? Comparing those nasty techniques with the simplicity and power of CSS3, we understand how far we have actually come up in our industry over all those years. Mary Lou’s technique for a sliding navigation with images is a vivid example for that.

A very simple CSS navigation technique allows you to add an image for every menu item and slide it out on hover. Essentially, it uses very basic HTML, CSS transitions and the nth-child selector. A very simple and useful technique — especially if you are working on a portfolio site, a gallery site or a slideshow. (vf)