<!DOCTYPE HTML>
<html>
<head>
<title>jQuery SlideDown() / SlideUp() With Bottom-Positioned Elements</title>
<style type="text/css">
#social-container {
top: 150px ;
display: none ;
left: 0px ;
position: fixed ;
width: 75px ;
}
#social-wrap {
background:#333;
height:330px;
margin:0 auto;
padding-top:5px;
width:75px;
clear:both;
}
#social-wrap ul {
display:inline;
width:60px;
}
#social-wrap ul li {
display:inline-block;
float: left;
width: 75px;
text-align:center;
margin-top:7px;
}
.connectBtn {
background:#000;
height:25px;
width:100px;
display:block;
}
</style>
<script type="text/javascript" src="http://www.webdesignerwall.com/demo/jquery/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$("#sm").click(function () {
$(this).show("slide", { direction: "down" }, 1000);
});
</script>
</head>
<body>
<h1>
jQuery SlideDown() / SlideUp() With Bottom-Positioned Elements
</h1>
<p>
<a id="sm" href="#" class="connectBtn"></a>
</p>
<div id="social-container">
<div id="social-wrap">
<ul>
<li>Stuff </li>
<li>Stuff </li>
<li>Stuff </li>
<li>Stuff </li>
<li>Stuff </li>
<li>Stuff </li>
<li>Stuff </li>
</ul>
</div>
</div>
</body>
</html>
|