www.webdeveloper.com
Results 1 to 3 of 3

Thread: Problems with animation/transformation in CSS (Noob needs help)

  1. #1
    Join Date
    Oct 2012
    Posts
    3

    Problems with animation/transformation in CSS (Noob needs help)

    I have some problems with the animation of the Dropdown menu. I just started with html and css and need some help with it. Could please somebody post some solutions how to animate the dropdown (to slide in, or become slowly visible, maybe with keyframes). I tried some time myself but didnt find a way how to do it.

    Thanks for spending you time on this it really helps me out

    This is the html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Untitled Document</title>
    <link href="Extendet Dropdown.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div class="container">
    <div id="menu">
    <ul class="menu-item">
    <li><a href="Try 2.html">Link to try 2</a>
    </li>
    <li><a href="Try 2.html">First Dropdown</a>
    <ul>
    <li><a href="Try 2.html">Link to try 2</a>
    </li>
    <li><a href="Try 2.html">Link to try 2</a>
    </li>
    <li><a href="Try 2.html">Link to try 2</a>
    </li>
    </ul>
    </li>
    <li>Back in time
    </li>
    <li>NO LINK
    </li>
    </ul>
    </div>
    </div>
    </body>
    </html>


    This is the CSS (don't mind the german comments)


    .container {
    max-width: 1920;
    min-width: 1280;
    max-height: 1920;
    min-height: 1080;
    background-color: black;
    padding: 20px:
    }

    #menu {
    width: 850px;
    height: 1080px;
    border:none; /* border = rand */
    background-color: yellow;
    margin: auto; /*zentriert das Hauptkästchen ==> hier Websiten Hintergrund*/
    }

    ul.menu-item a {
    display:block;
    color: black;
    font-family: Verdana;
    font-size: 14px;
    text-decoration: none;
    }

    ul.menu-item {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #fff;
    display:block;
    color: black;
    font-family: Verdana;
    font-size: 14px;
    text-decoration: none;
    }

    /*ul.menu-item { position: relative; z-index: 597; float: left; } keine sichtbare Funktion*/

    ul.menu-item li {
    float: left;
    line-height: 24px;
    vertical-align: middle; zoom: 1;
    width: 200px;
    height: 24px;
    margin: 7px 0px 0px 7px;
    text-align: center;
    background-color: white;
    color: black;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    border-radius:5px;
    }

    ul.menu-item li:hover { /*hover funktion für die boxen ganz oben*/
    position: relative;
    z-index: 599;
    cursor: default;
    color: #FF6C00;
    -webkit-transition: color 0.5s ease;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    }

    ul.menu-item ul { /*einstellung für das dropdown kästchen*/
    visibility: hidden;
    position: relative;
    top: 100%;
    left: 0;
    z-index: -1;
    margin: -31px 0px 0px 0px;
    background-color: white;
    border: none;
    list-style: none;
    border-bottom-left-radius:5px;
    border-bottom-right-radius: 5px;
    -webkit-transition: all 1s ease-in-out;
    }

    ul.menu-item ul li { /*einstellung für die Liste des Dropddownkästchens */
    float: none;
    background: white;
    text-align: center;
    line-height: 24px;
    width: 200px;
    height: 24px;
    margin: 7px 0px 0px -40px;
    border-radius: 5px;
    }


    ul.menu-item ul li:hover{ /* notwendig, da sonst die unter Kante der Dropdown liste beim hover auch abflacht */
    border-radius: 5px;
    }

    ul.menu-item li:hover > ul {
    transform: visibility: visible;
    }

    ul.menu-item a:hover {
    color: #FF6C00; /* color */
    text-decoration: none; /* eliminates underline */
    -webkit-transition: color 0.5s ease;
    }

  2. #2
    Join Date
    Mar 2011
    Posts
    1,137
    I don't have time at the moment to dig through all of your code, but one thing that I see is that the 'transition' settings are only using the -webkit browser prefix. That means only Webkit browsers (Chrome, Safari, etc.) will see the effect. So if you're using MSIE, Firefox, or Opera to view the page, that would explain the issue. In any case, you'll eventually want to add the -moz, -o, -ms, and plain 'transition' settings to your code.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Oct 2012
    Posts
    3
    It would be awesome if you could spare a littl bit of time. And maybe show an example for an sliding or "slowly becoming visible dropdown box" which is working with this code.
    I haven't any knowledge with animation

    Im using just -webkit- cause im using chrome the other browsers gonna be added. Its one of my first trys for a website
    Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles