http://api.jquery.com/animate/

페이지 하단에 예제들 쭉 나오죠?  두번째 예제 참고해서 만드시면 됩니다.

<div id="menu_slider" style="top: -181px;">
<div id="menu_slider_contact">
<div id="social_wrapper">

<p class="italic times uppercase">connect with us</p>
<div class="centered_div_content">
<ul id="sociallinks">
<li><a href="http://www.facebook.com/skyboxdesign" target="_blank" style="background-image: url(img/socialicon_facebook.gif);">facebook</a></li>
<li><a href="http://pinterest.com/remcoknol/" target="_blank" style="background-image: url(img/socialicon_pinterest.gif);">pinterest</a></li>
<li><a href="http://www.linkedin.com/company/skybox/" target="_blank" style="background-image: url(img/socialicon_linkedin.gif);">linkedin</a></li>
</ul>
</div>
</div>
<h3 class="heading">contact</h3>
<p class="uppercase"><span class="italic times fontsize_14">SKYBOX</span><br>LAURIERGRACHT 116<br>1016 RR&nbsp;&nbsp;AMSTERDAM<br>THE NETHERLANDS<br>-<br>00 31 20 846 45 75</p>
</div>
<h1 id="main_logo">Skybox Conceptual Design</h1>
</div>

css는

#menu_slider {
display: block;
position: fixed;
/* width:900px;
left: 50%;
margin-left: -450px;*/
width:100%;
height:180px;
top: -181px;
/* top: -16.5em;*/
z-index: 600;
background-color: #FFFFFF;
}

#menu_slider_contact {
display: block;
position: relative;
width: 100%;
height:175px;
margin:0 auto;
text-align: center;
border-top: #000000 solid 5px;
border-bottom: #000000 solid 1px;
background-color: #000000;
color:#FFFFFF;
}

#social_wrapper {
display: block;
position: absolute;
z-index: 5;
width:150px;
height:30px;
padding-top:55px;
right: 0;
}

#sociallinks {
display: block;
padding:0;
margin:0;
list-style: none;
}

#sociallinks li {
display: block;
float:left;
padding:0;
margin:0;
}

#sociallinks li:last-child a {
margin-right:0px;
}

#sociallinks li a {
display: block;
width:23px;
height:23px;
background-color: #000000;
border:#000000 solid 1px;
text-indent: -9999px;
margin-right:10px;
background-repeat: no-repeat;
background-position: 0px -23px;

-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

#sociallinks li a:hover {
background-position: 0px 0px;
}

#navigation li.previous span {
opacity: 0;
}

#navigation li.next span {
opacity: 0;
}

ul#navigation {
text-align:left;
display: block;
margin: 0 auto;
clear: both;
width: 900px;
height: 110px;
font-size: 0px;
padding-top:5px;
}

ul#navigation li.menu-item {
display:inline-block;
padding-top:3px;
width:33.2%;
opacity: 1;
font-family: Times New Roman, Times, serif;
}