$(document).ready(function() { for(i=1;i<=80;i++) $('body').append('<p>text '+i+': sample text</p>'); /*Here's the code*/ $('.button').toggle(function(){ $(this).html('«'); $('.content').slideUp(300); }, function(){ $(this).html('»'); $('.content').slideDown(300); }); });
body{margin:0;padding:0;color:#CCC;} .footer{ position:fixed; z-index:100; width:100%; bottom:0px; border-top:#222 solid 1px; } .footer .button{ position:fixed; right:0px; bottom:0px; width:50px; text-align:center; padding:10px; background:#333; color:#eee; font-weight:bold; cursor:pointer; } .footer .button:hover{ background:#eee; color:#666; } .footer .content{ text-align:center; background:#666; padding:10px; } .footer .content a{ color:#FFF; margin:0 5px 0 5px; }
<div class="footer"> <div class="button">»</div> <div class="content"> <a href="#">Menu 1</a> <a href="#">Menu 2</a> <a href="#">Menu 3</a> <a href="#">Menu 4</a> <a href="#">Menu 5</a> </div> </div>