Footer Toggle Content jqueryDownload
<style type="text/css">
body {
font-size:72%;
font-family:Arial, Helvetica, sans-serif;
line-height:1.9em;
color:#434343;
background:#FCFCFC;
}
a:hover {
text-decoration:none;
color:#7B7B7F;
}
h3 {
font:2em Arial, Verdana, Helvetica, sans-serif;
color:#2A313A;
padding-bottom:20px;
}
ul, ol {
margin:0;
padding:0 0 20px;
}
ul {list-style:none;}
ul li {
margin:0;
padding:5px 0 5px 21px;
color:#434343;
background:url(images/arr.gif) 0 9px no-repeat;
}
ul li a {
color:#434343;
text-decoration:none;
}
ol li {
margin:0 0 0 2em;
padding:0;
color:#434343;
}
.wrap {
width:1000px;
position:relative;
margin:0 auto;
z-index:300;
}
.clear {clear:both; height:0px;}
#footer_button {
width: 121px;
height:22px;
margin-right:34px;
float:right;
cursor: pointer;
background:url(images/more_info.png) 0 0 no-repeat;
}
#footer_higher {
width:100%;
background: #293139;
position:relative;
z-index:100;
}
#footer_higher #footer_content {
width: 932px;
margin: 0 auto;
display: none;
}
#footer_higher #footer_content .footbox1 {
float: left;
width: 265px;
margin: 20px 0 30px;
}
#footer_higher #footer_content .footbox2 {
float: left;
width: 130px;
margin: 20px 0 30px 50px;
}
#footer_higher #footer_content .footbox3 {
float: right;
width: 260px;
margin: 20px 0 30px;
}
#footer_higher h3 {
color:#ffffff;
font-size:1.5em;
padding-bottom:5px;
}
#footer_higher .title {
width:100%;
position:relative;
margin-bottom:15px;
border-bottom:1px solid #191E23;
}
#footer_higher .title:after {
width:100%;
content: '';
position: absolute;
border-bottom:1px solid #39444F;
bottom:-2px;
}
#footer_higher li {
margin:0;
padding:5px 0;
background:none;
border-bottom:1px solid #0D1012;
}
#footer_higher #footer_content .footbox1 li {
padding-left:20px;
background:url(images/foot_arr.gif) 0 8px no-repeat;
}
#footer_higher a {
color:#9A9B9D;
text-decoration:none;
}
#footer_higher a:hover {
color:#ffffff;
text-decoration:none;
}
#FootContact p {margin-bottom:3px; clear:both;}
#FootContact p label {
width:45px;
padding-right:5px;
font-size:0.9em;
padding-top:2px;
text-transform:uppercase;
float:left;
color:#96999C;
}
#FootContact input[type=text],
#FootContact textarea {
padding:3px;
font:0.95em/0.9em Arial, Helvetica, sans-serif;
color:#96999C;
background:#1B2025;
border-top:1px solid #0D1012;
border-left:1px solid #0D1012;
border-bottom:1px solid #394550;
border-right:1px solid #394550;
}
#FootContact input[type=text] {
width:199px;
height:15px;
}
#FootContact input[type=text]:hover,
#FootContact textarea:hover {background:#293139;}
#FootContact input[type=text]:focus,
#FootContact textarea:focus {background:#444A50;}
#FootContact input[type=submit] {
border:1px solid #1A1F24;
box-shadow:1px 2px 2px #1A1F24;
-moz-box-shadow:1px 2px 2px #1A1F24;
-webkit-box-shadow:1px 2px 2px #1A1F24;
box-shadow:1px 2px 2px #1A1F24;
text-transform:uppercase;
background: #444A50;
}
#FootContact textarea {
width:249px;
height:95px;
overflow:hidden;
}
#footer_lower {
border-top:6px solid #14181B;
width: 100%;
color: #434343;
padding: 25px 0px;
position:relative;
z-index:200;
background:#fff;
}
#footer_lower .valid {
display:block;
font-size:0.95em;
color: #A1A1A1;
}
#footer_lower #footer_info {
width: 932px;
margin: 0 auto;
}
#footer_lower #copyright {
width: 610px;
float: left;
text-align:left;
}
#footer_lower #attr {
width: 300px;
padding-top:10px;
float: right;
font-size:1.3em;
text-align:right;
color:#A1A1A1;
}
#footer_lower #attr b {font-weight:normal;}
#attr ul {
margin:0;
padding:0;
list-style:none;
float:right;
}
#attr ul li {
margin:0;
padding:0 3px 0 0;
float:left;
background:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
var slide = false;
var height = $('#footer_content').height();
$('#footer_button').click(function() {
var docHeight = $(document).height();
var windowHeight = $(window).height();
var scrollPos = docHeight - windowHeight + height;
$('#footer_content').animate({ height: "toggle"}, 1000);
if(slide == false) {
if($.browser.opera) {
$('html').animate({scrollTop: scrollPos+'px'}, 1000);
} else {
$('html, body').animate({scrollTop: scrollPos+'px'}, 1000);
}
slide = true;
} else {
slide = false;
}
});
});
</script>
<div style="height:900px;"></div>
<div class="wrap">
<div id="footer_button"></div>
<div class="clear"></div>
</div>
<div id="footer_higher">
<div id="footer_content">
<div class="footbox1">
<div class="title"><h3>Recent News</h3></div>
<ul>
<li><a href="#" title="Donec accumsan lorem ipsum dolor...">Donec accumsan malesuada orcidonec sitmet eros lorem ipsum dolor...</a></li>
<li><a href="#" title="Amet incon ecteetra magna donec accumsan...">Amet incon ectetuer adipiscing maurse pharetra magna donec accumsan...</a></li>
<li><a href="#" title="Malesuada orcdo nsec tetuer malesuada...">Malesuada orcdonec umet lorem ipsum dolorconsec tetuer malesuada...</a></li>
</ul>
</div>
<div class="footbox2">
<div class="title"><h3>Archives</h3></div>
<ul>
<li><a href="#" title="June, 2010">June, 2010</a></li>
<li><a href="#" title="May, 2010">May, 2010</a></li>
<li><a href="#" title="April, 2010">April, 2010</a></li>
<li><a href="#" title="March, 2010">March, 2010</a></li>
<li><a href="#" title="February, 2010">February, 2010</a></li>
<li><a href="#" title="January, 2010">January, 2010</a></li>
</ul>
</div>
<div class="footbox2">
<div class="title"><h3>Categories</h3></div>
<ul>
<li><a href="#" title="Advertising">Advertising</a></li>
<li><a href="#" title="News">News</a></li>
<li><a href="#" title="Web Design">Web Design</a></li>
</ul>
</div>
<div class="footbox3">
<div class="title"><h3>Email Us</h3></div>
<form action="" id="FootContact">
<p><label for="fname">Name:</label><input type="text" id="fname" /></p>
<p><label for="femail">E-mail:</label><input type="text" id="femail" /></p>
<p><textarea cols="5" rows="3"></textarea></p>
<p><input type="submit" value="Submit" title="Submit" /></p>
</form>
</div>
<div class="clear"></div>
</div>
</div>
<div id="footer_lower">
<div id="footer_info">
<div id="copyright">
Copyright © 2012 • r-ednalan.blogspot.com • All rights reserved
<span class="valid">http://r-ednalan.blogspot.com/</span>
</div>
<div id="attr">
<ul>
<li><b>Stay Connected</b></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
