Advanced Search

Results 1 to 8 of 8

Thread: CSS3 animated vertical slanted menu

  1. #1
    Join Date
    Feb 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default CSS3 animated vertical slanted menu

    1) Script Title: CSS3 animated vertical slanted menu

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs..._slanted_menu/

    3) Describe problem:

    I think the programmers have done a wonderful job with the 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:

    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:

    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>
    Last edited by james438; 02-05-2014 at 03:26 AM.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,886
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    A couple of things you need to change;
    Code:
    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;
    }
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    Fortissimo (02-05-2014)

  4. #3
    Join Date
    Feb 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you - problem solved!

  5. #4
    Join Date
    Feb 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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!

  6. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,886
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    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/articl...ebdesign-16892
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  7. #6
    Join Date
    Feb 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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!

  8. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,886
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  9. #8
    Join Date
    Feb 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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!

Similar Threads

  1. CSS3 animated vertical slanted menu
    By WKDfm in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 12-03-2012, 09:19 AM
  2. Slanted Divider Menu Help!!
    By Cball in forum CSS
    Replies: 3
    Last Post: 08-05-2012, 05:46 PM
  3. slanted menu
    By discdemo in forum CSS
    Replies: 2
    Last Post: 09-16-2009, 11:42 PM
  4. slanted menu
    By discdemo in forum CSS
    Replies: 0
    Last Post: 08-14-2009, 07:49 PM
  5. CSS slanted menu
    By raggaemuppet in forum CSS
    Replies: 3
    Last Post: 10-25-2006, 06:44 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •