Results 1 to 4 of 4

Thread: CSS3 animated vertical slanted menu

  1. #1
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default CSS3 animated vertical slanted menu

    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.

  2. #2
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

  3. #3
    Join Date
    Aug 2004
    Posts
    9,887
    Thanks
    3
    Thanked 962 Times in 951 Posts
    Blog Entries
    15

    Default

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

  4. The Following User Says Thank You to ddadmin For This Useful Post:

    WKDfm (12-03-2012)

  5. #4
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Absolute star, thank you very much I will make sure the Dynamic Drive add stays on the site. Had to alter the writing to white as my background is black though.

Similar Threads

  1. Slanted Divider Menu
    By jazzyj05 in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 08-26-2012, 06:53 PM
  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
  •