jQuery 1.4 Animation Techniques - Index of

Sliding Animations
2. Save the file as slideDown.html in the main project folder.
3. Next let's add the CSS for this example. In a new file in your text editor, add the
following code:
header {
display:block;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
header ul {
margin:0; position:relative; float:right; list-style-type:none;
font-size:11px;
}
header ul li { float:left; margin-top:10px; }
header ul li a {
display:block; margin:-13px 0 0 10px; padding:11px 18px;
-moz-border-radius:5px; -webkit-border-radius:5px;
border-radius:5px; font-size:14px; color:#000;
}
header ul li a:hover, header ul li a:focus, header ul li a.on {
padding:3px 10px; border:8px solid #666; background-color:#fff;
text-decoration:none;
}
header ul li a.on {
border-bottom:0; padding-bottom:10px;
-moz-border-radius-bottomright:0; -moz-border-radius-
bottomleft:0;
-webkit-border-bottom-right-radius:0;
-webkit-border-bottom-left-radius:0; border-bottom-right-
radius:0;
border-bottom-right-radius:0; position:relative; z-index:10;
outline:0;
}
header form {
display:none; width:260px; border:8px solid #666;
-moz-border-radius:px; -moz-border-radius-topright:0;
-webkit-border-radius:5px; -webkit-border-top-right-radius:0;
border-radius:5px; border-top-right-radius:0;
position:absolute; right:0; top:27px; z-index:5;
}
header fieldset { margin:0; padding:20px 10px 10px; border:0; }
header legend { display:none; }
header form label { display:block; float:right; font-size:14px; }
header form label:first-child { margin-bottom:10px; }
[ 76 ]