I just came up with this footer idea where the top of the background image/navigation should stay fixed just above the bottom of the page. When you hover over this the rest of the footer, which is hidden, will slide up. When you mouse out, it will fall again and bounce ever so slightly at the bottom.
Trouble is, I’m having trouble getting it to actually work.
Here’s the HTML:
body
div class=”container”
p Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. /p
img src=”beer.jpeg”
div id=”sliding-footer”
ul
li Events li
li Beer li
li Contact li
li Social li
ul
p And the rest of the footer…p
div !– end container —
body
And the CSS:
body {
margin: 0 50px;
background: url(‘backing.jpg’) repeat scroll bottom left !important;
line-height: 1;
}
.container {
margin: 25px auto;
width: 1000px;
}
.container img {
margin: 25px 50px;
}
#sliding-footer {
position: fixed;
bottom: -330px;
height: 400px;
margin-left: auto;
margin-right: auto;
width: 1000px;
background-image:url(‘bg-slider.png’);
}
#sliding-footer ul {
margin: 30px 0 0 70px;
float: left;
width: 100%;
list-style-type:none;
z-index: 9999;
}
#sliding-footer ul li {
float: left;
margin: 15px 20px;
padding: 0;
display:inline;
}
And the jQUERY: Which I put in the head.
$(document).ready(function () {
$(‘#sliding-footer’).bind(‘mouseenter’, function () {
$(this).stop().animate({bottom: 0}, 750, ‘easeInExpo’);
}).bind(‘mouseleave’, function () {
$(this).stop().animate({bottom: ‘-330px’}, 750, ‘easeOutBounce’);
});
});
Thanks for your help! I’m very grateful.
