Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: Vertical CSS Menus: CSS3 demos: Here

CSS3 animated vertical slanted menu

Author: Dynamic Drive

CSS3 lets you animate virtually any CSS property, so instead of directing changing into a property, the browser slowly morphs into the new value instead. This is done via CSS3's "transition" property, which is supported in IE10+, FF3.5+, Chrome/Safari, and Opera 10+. With that introduction out of the way, this is a vertical list menu that uses CSS3 animation to gradually expand the selected menu item horizontally so to highlight it. It also employs the CSS border trick to create a cross browser slanted left edge. The final result is a sleek vertical list menu that uses nothing but pure HTML markup!

Demo (best viewed in (IE10+, FF3.5+, Chrome/Safari, and Opera 10+):

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 12/13/2011

Revision History: None

Usage Terms: Click here

Your Comments
Copyright 2006-2016 Dynamic Drive