Navigaiton Footer

by Apple Ilagan

HTML

<div id="footer">
<div class="clearfix footerlink">
<div class="upme" id="toggle">Toggle</div>
<div class="footertxt">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Properties</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">What others are saying</a></li>
</ul>
</div>
<div class="footer_icon">Images</div>
</div></div>

CSS

#footer{clear: both; width:100%; margin:0 auto; padding:20px 0 0 0; 
background:#eee; font-family: 'Raleway', sans-serif; font-size:11px;}
.upme {width:80px; height:35px; margin:0 auto; position:relative; background:#ccc;}
.downme {width:80px; height:35px; margin:0 auto; position:relative; background:#ddd;}
.upme, .downme{width:80px; height:35px; text-indent:-999999px; cursor:pointer; margin-top:-19px;}
.footerlink{clear: both; width:1080px; margin: 0 auto; padding:0 0 20px 0; font-family: 'Raleway', sans-serif; font-size:12px;}
.footertxt {width:50%; margin:20px 0 0 0; line-height:20px; text-align:left; float:left; display:none;}
.footertxt span {color:#000;adding:0 5px;}
.footertxt p {clear:both; color:#000;}
.footertxt ul {list-style:none; padding:0; margin:0 auto; clear:both;}
.footertxt li {padding:0 10px; text-align:center; border-left:1px #000 solid; display:inline; font-weight:normal; text-transform:uppercase;}
.footertxt li a{color:#000; xt-decoration:none;}
.footertxt a{color:#000; text-decoration:none;}
.footertxt li:first-child {border-left:none; padding-left:0; background:none; margin:0;}
.footer_icon {width:50%; float:right; padding-left:38px; height:28px; border-left:1px #8a8a8a solid; 
margin-top:20px; display:none;}
.footer_icon img{width:202px;}

JavaScript

//Footer Toggle
	$('.footerlink').toggle(function() {
	$('#toggle').addClass('downme');	
  	$('.footertxt, .footer_icon').fadeIn(500);
	}, function() {
	$('#toggle').removeClass('downme');	
  	$('.footertxt, .footer_icon').fadeOut(500);
	});