Crie um footer com um id="rodape"
e depois coloque no css:
html:
<footer id="rodape"><a style="position: relative; right: 0px; float:left; font-size: 50px; display: block; text-decoration: none; color: #ffffff; " href="javascript:drop('fechar')" id="link"><span> < </span></a>
</footer>
css:
#rodape{
margin-bottom:0px;
bottom: 0px;
background: #333333;
width: 100%;
height: 50px;
position: absolute;
right: 0px;
-webkit-transition: 0.5s;
}
o width: 100%
e o height: 50px
são opcionais.
Se você não quiser um um width: 100%
alinha-se com o left:
.
script para esconder/aparecer
function drop(ver){
if(ver == "fechar"){
document.getElementById('rodape').style.left = "-97%";
document.getElementById('link').style.float = "right";
document.getElementById('link').href = "javascript:drop('abrir')";
document.getElementById('link').innerHTML = ">";
}if(ver == "abrir"){
document.getElementById('rodape').style.left = "0px";
document.getElementById('link').style.float = "left";
document.getElementById('link').href = "javascript:drop('fechar')";
document.getElementById('link').innerHTML = "<";
}
}
E para aparecer quando o usuário está no fim este link pode lhe ajudar http://www.1stwebdesigner.com/tutorials/create-stay-on-top-menu-css3-jquery/
display: fixed
e JS para ocultar e exibir, além das duas imagens das setas...