Transition test with sidebar/menu

Note: all effects on this page done with CSS

This is a CSS3 transition test. Take your pointer over to the sidebar to the left and see what happens.

The sidebar should be visible in Firefox, Safari and Explorer. The transition effect is at the moment of writing this only supported by webkit browsers like Google Chrome and Safari. When hovered the menu extends smoothly out over the page, covering the text beneath it. In Firefox it simply pops up.

The sidebar can be used as an additional infobox. Multiple sidebars or topbars can for example be used as a navigation menu.

Here's the code:

#sidebar {
-webkit-transition-property: background-color, padding-left;
-webkit-transition-duration: 500ms, 500ms;
}

#sidebar:hover {
background-color: #eee;
padding-left: 195px;
}

The positioning of the sidebar or menu can be done in several ways. In this example I've used position: absolute and margin-left: -175px to hide it from view and #sidebar:hover { padding-left: 195px; } brings it out.

If a transition element like the sidebar is placed as an inline object within the text it will move everything to the side when hovered.