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

**MrNonamesGrave** · 10-31-2012, 09:18 AM

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

**rtrethewey** · 10-31-2012, 10:24 AM

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.

**MrNonamesGrave** · 11-01-2012, 01:22 PM

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: Problems with animation/transformation in CSS (Noob needs help)

Thread Tools

Display

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

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions