Using effects with menu navigation

There are several approaches we could take when it comes to applying effects to the menu widget. Where could we apply effects in the menu widget? The user hovers their mouse pointer over the menu items, which results in a state change. The user expands a submenu. These two actions are the main interactions we could improve visually with some animation. Let's look at how we can address these effects using as little JavaScript as possible in favor of using CSS transitions. Transitions are an emerging CSS standard in so far, that not all browsers support them using standard syntax yet. In the spirit of progressive enhancement, however, applying CSS in this way means that the basic menu functionality will work just fine even in browsers that don't support it. And we can side-step having to write an overwhelming amount of JavaScript to animate the menu navigation.

Getting ready

For this example, we can use any standard menu HTML code. Ideally, it should have a...