Slide Up Nav
In this tutorial we will make a
slide up nav where each part of the nav will slide up so it animates in a
sequence. To do this in jquery we have to make a way to slide up as jquery
doesn't have one so we use a simple technique where we make an overlay to slide
up.
start by typing up the HTML
<div id="wrapper">
<h1>Slide Up Nav</h1>
<ul>
<li><div id="over1"
class="over"></div><div
class="link">link</div></li>
<li><div id="over2"
class="over"></div><div
class="link">link</div></li>
<li><div id="over3"
class="over"></div><div
class="link">link</div></li>
<li><div
id="over4"class="over"></div><div
class="link">link</div></li>
<div style="clear:both;"></div>
</ul>
</div>
now this is going to work by having
a div inside the other div and the one on to will slide up giving the illusion
that we are sliding up the nav part from the bottom as it will be underneath.
Now add the CSS
body,h1,li,ul
{
margin: 0px;
padding: 0px;
}
li
{
list-style-type: none;
display: block;
width: 100px;
height: 70px;
margin-left: 5px;
margin-right: 5px;
float: left;
}
#wrapper
{
width: 440px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
h1
{
font-weight: normal;
font-size: 14pt;
font-family: arial;
margin-bottom: 10px;
}
.over
{
width: 100px;
height: 70px;
background-color: white;
position: absolute;
z-index: 1;
}
.link
{
width: 88px;
height: 58px;
background-color: #4a98e7;
border: 1px solid #3770aa;
padding: 5px;
color: #575757;
}
Now to add the javascript to make
the animated effect
$(function(){
$("#over4").slideUp("slow",function(){
$("#over3").slideUp("slow",function(){
$("#over2").slideUp("slow",function(){
$("#over1").slideUp("slow",function(){
});
});
});
});
});
Now each
one will slide up and when it has performed the animation we set the next one
to slide up.
