CSS3 animated vertical slanted menu

[Fortissimo]

1) Script Title: CSS3 animated vertical slanted menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/css3_animated_vertical_slanted_menu/

3) Describe problem:

I think the programmers have done a wonderful job with the CSS3 animated vertical slanted menu (http://www.dynamicdrive.com/style/csslibrary/item/css3_animated_vertical_slanted_menu/). For the design of my site, I need to try to flip this menu horizontally so that the menu items are left-aligned instead of right-aligned, they slide to the right instead of sliding to the left, etc. I spent some time tweaking the original code (also changed color scheme to work with my new site... and changed a few of the code comments appropriately while I was at it), and I got everything to work EXCEPT the slant! Since the original slant is created with top and right values (see 2nd-to-last code line that has a comment in it in the <style> section - the 1st and 4th parameters correspond to top and right), I thought it would only be logical to create the opposite slant using corresponding bottom and left values (2nd and 3rd values), but my efforts were to no avail. :~( Any ideas?

Here is the style code, and below that will be the HTML code:


<style>
ul.svertical-l {
width: 300px; /* width of menu */
overflow: auto; /* background of menu would go here, something like "background: black;" */
margin: 0; padding: 0;
padding-top: 7px; /* top padding */
list-style-type: none; }
ul.svertical-l li {
text-align: left; /* right align menu links */ }
ul.svertical-l li a {
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background: rgb(180, 40, 30); /* 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(60,30,30, 0.8); /* inner right shadow added to each link */
-webkit-box-shadow: inset 7px 0 5px rgba(60,30,30, 0.8);
box-shadow: inset 7px 0 5px rgba(60,30,30, 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-l li a:hover {
padding-left: 30px; /* add left padding to expand link horizontally to the right */
color: black;
background: rgb(240, 20, 5);
-moz-box-shadow: inset 3px 0 2px rgba(60,30,30, 0.8); /* contract inner right shadow */
-webkit-box-shadow: inset 3px 0 5px rgba(60,30,30, 0.8);
box-shadow: inset 3px 0 5px rgba(60,30,30, 0.8); }
ul.svertical-l li a:before { /* CSS generated content: slanted left edge */
content: "";
position: absolute; left: 0; top: 0;
border-style: solid; border-width: 0 70px 20px 0; /* 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>

HTML code:


<ul class="svertical-l">
<li><a href="#">Link</a></li>
<li><a href="#">Pretty link</a></li>
<li><a href="#">Even prettier link</a></li>
<li><a href="#">Prettiest link</a></li>
<li><a href="#">Butt ugly link</a></li>
<li><a href="#">Just a link</a></li>
</ul>

[Beverleyh]

A couple of things you need to change;

ul.svertical-l li a:before { /* CSS generated content: slanted left edge */
right: 0;
border-width: 70px 20px 0 0;
border-color: transparent black transparent transparent;
}

[Fortissimo]

Thank you - problem solved!

[Fortissimo]

Actually one more question (and BTW thanks for moving my question to the right area).

I have this menu element enclosed under two parent <div> elements, and suddenly it stopped working. In an act of desperation, I tried deleting random parameters from the 1st parent element, and the magic parameter ended up being z-index:-1. Why did this parameter prevent the menu from working? When z-index of its grandparent is -1, not only did the menu stop animating (no mouse-over effect), clicking on each item had no effect (the <a href=> tags didn't work).

Thanks!

[Beverleyh]

Z-index affects stacking order of element so it sounds like you put it right to the bottom of the stack (or at least under something else). I have no idea what's going on elsewhere in your CSS but here is some info about z-index to explain a little more about how it works and why it is not always so predictable: http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892

[Fortissimo]

Yeah, this is what I understood about z-index already, but I haven't been able to find any explanations for how z-index can affect anything other than what is visible. I wouldn't expect z-index to affect functionality of things that are visible, and in fact this scenario produced the opposite effect from what I would expect: I'd expect an invisible container <div> to silently sabotage other divs that are behind it (but you can still see them because the container is invisible) if the z-index is NOT set to a negative value, similar to the Photoshop scenario where you try to draw on the background layer but you end up drawing on another layer instead that is invisible and in front of it. I would think that setting z-index to a negative value in the container div would only guarantee that it will *not* interfere with any other divs on the page. Oh well. I guess that's what I get for trying to be overly correct in my coding!

[Beverleyh]

I don't really understand what you're describing or what you mean by invisible and visible divs (display:none?, visibility:hidden? Or just empty?). If you're wanting further help I think you need to provide an example of what you're asking about. Please provide a link to your page and maybe we can clarify or give reasons for this unexpected behaviour.

[Fortissimo]

I was only asking out of curiosity - since it was only a luxury that I got an answer to this question, I wasn't very diligent about providing examples. If the issue becomes anything more than moot in the future, I will come back and document my issue more thoroughly. Thanks for your help!