I have a menu composed of 4 images in a unordered list, each one with text in it (info), initially hidden. When the user clicks on any of these images, the corresponding info text is either shown or hidden with a jQuery animation function.
I have a footer which I intended to always be 40px up from the bottom of the page. The problem is: when the menu is clicked and some of the info text is shown, it makes the body increase in height, thus displaying the vertical-scroll bar on the browser window.
However the footer remains in the same place, ignoring the new height of the body element.
How do I get it to follow the animation of the menu, moving up/down but always at 40px from the bottom of the browser window?
This JSFiddle replicates the essence of the problem: http://jsfiddle.net/bmscmoreira/6r4K9/8/
My HTML is like this:
<body>
<div id="menu">
<ul class="accordion">
<li>
<img id="menu-item-1" src="img/menu-item-1.png" alt="1">
</li>
<li class="info">
<p>here goes full text for menu item 1</p>
</li>
<li>
<img id="menu-item-2" src="img/menu-item-2.png" alt="2">
</li>
<li class="info">
<p>here goes full text for menu item 2</p>
</li>
<li>
<img id="menu-item-3" src="img/menu-item-3.png" alt="3">
</li>
<li class="info">
<p>here goes full text for menu item 3</p>
</li>
<li>
<img id="menu-item-4" src="img/menu-item-4.png" alt="4">
</li>
<li class="info">
<p>here goes full text for menu item 4</p>
</li>
</ul>
</div>
<div id="footer">
<p>footer text</p>
</div>
</body>
jQuery animation function which displays or hides full text of the menu items:
<script type="text/javascript">
$(document).ready(function($) {
$('.accordion > .info').hide();
$('.accordion > li > img').click(function(){
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$(this).parent().next().slideUp();
} else {
$('.accordion > li > img').removeClass('selected');
$(this).addClass('selected');
$('.accordion > .info').slideUp();
$(this).parent().next().slideDown();
}
return false;
});
});
</script>
CSS:
html {
background-color: #666666;
}
#footer {
position: absolute;
bottom:40px;
}
#menu {
position: relative;
margin-left:55px;
margin-top:75px;
}