Dynamic Drive CSS Library- CSS3 animated vertical slanted menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

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:

<style>

ul.svertical{
width: 200px; /* width of menu */
overflow: auto;
background: black; /* background of menu */
margin: 0;
padding: 0;
padding-top: 7px; /* top padding */
list-style-type: none;
}

ul.svertical li{
text-align: right; /* right align menu links */
}

ul.svertical li a{
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background: rgb(127, 201, 68); /* initial background color of links */
font: bold 16px Germand;
text-decoration: none;
padding: 5px;
margin-bottom: 7px; /* spacing between links */
color: black;
-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); /* inner right shadow added to each link */
-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
-moz-transition: all 0.2s ease-in-out; /* CSS3 transition of hover properties */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

ul.svertical li a:hover{
padding-right: 30px; /* add right padding to expand link horizontally to the left */
color: black;
background: rgb(153,249,75);
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8); /* contract inner right shadow */
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
}

ul.svertical li a:before{ /* CSS generated content: slanted right edge */
content: "";
position: absolute;
left: 0;
top: 0;
border-style: solid; 
border-width: 70px 0 0 20px; /* Play around with 1st and 4th value to change slant degree */
border-color: transparent transparent transparent black; /* change black to match the background color of the menu UL */

}

</style>

The HTML:

<ul class="svertical">
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com/">Coding Forums</a></li>		
</ul>

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
Dermatal

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.