Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
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:


Code Info

Rate this code:

Date Posted: 12/13/2011

Revision History: None

Usage Terms: Click here

Your Comments (5)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 1 pages

Very nice indeed! Unfortunately for IE we have to wait for IE10.
Posted by jzigbe on 12/15, 05:49 AM
Great! Css is just one beautiful bride. Look what you did here. The code is very clean and perfect! Very nice work...uh...Dynamic. Keep it up!
Posted by William on 12/15, 05:51 PM
Great site, valuable and very useful information,you has provided us for that I really thankful to you
Posted by mariasemuel on 01/07, 03:52 AM
oh cool vertical slanted menu! thanks a lot!
Posted by spar on 01/08, 07:20 PM
Thanks for sharing. It looks great :)
Posted by Onenet on 01/10, 09:28 AM

Comment Pages 1 of 1 pages

Commenting is not available in this weblog entry.
Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.