フッターにメニューを固定して表示/非表示出来るようにする
Result
jQuery
$(document).ready(function() {
/*Here's the code*/
$('.button').toggle(function(){
$(this).html('«');
$('.content').slideUp(300);
}, function(){
$(this).html('»');
$('.content').slideDown(300);
});
});
css
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;
}
html
<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>
via
Access Fast Link on Fixed Bottom Page