CSS3 animated vertical slanted menu

**WKDfm** · 12-02-2012, 03:25 PM

1) CSS3 animated vertical slanted menu

2) http://www.dynamicdrive.com/style/cs..._slanted_menu/

3) I simply love this script and, what I want to do is make a menu on the other side that slants in the opposite direction. I have tried altering the code a bit but, all to no avail. Any help would be greatly received.

**WKDfm** · 12-02-2012, 05:11 PM

Forgot to say, you can see what I mean on a test page here http://www.wkdfm.co.uk/test.htm

**ddadmin** · 12-03-2012, 06:59 AM

Sure, try the below modified CSS code to have the menu align left and fly out to the right, with the slanted edge also being on the right side. Relevant changes in red:

Code:

<!doctype html>

<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: left; /* left 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;
padding-right: 15px;
margin-bottom: 7px; /* spacing between links */
color: black;
-moz-box-shadow: inset 7px 0 5px rgba(114,114,114, 0.6); /* inner right shadow added to each link */
-webkit-box-shadow: inset 7px 0 5px rgba(114,114,114, 0.6);
box-shadow: inset 7px 0 5px rgba(114,114,114, 0.6);
-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-left: 20px; /* 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:after{ /* CSS generated content: slanted right edge */
content: "";
position: absolute;
right: 0;
top: 0;
border-style: solid; 
border-width: 0 0 70px 20px; /* Play around with 1st and 4th value to change slant degree */
border-color: transparent transparent black transparent; /* change black to match the background color of the menu UL */

}

</style>

<body>

<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>