Trying to achieve a footer that expands when moused-over using the following HTML/jQuery code below. However, the footer remains static and does not expand at all (see CSS at bottom).
HTML:
<div id="footer">
<div id="v_line"></div>
<div class="column">
<ul id="lpro"> <a href="https://www.google.com/" target="_blank"><div class="googleme">
<img src="google.png" alt="google_filler"></div></a>
</ul>
</div>
<div class="column">
<ul id="spro"> <a href="https://www.yahoo.com" target="_blank"><div class="yahoo"><img
src="yahoo.png" alt="yahoo_filler"></div></a>
</ul>
</div>
</div>
JavaScript (with JQuery):
function openmenu(e) {
if (e) e.stopPropagation();
$('#footer').animate({
height: "75px"
}, 400, null, function () {
$("#footer").off("mouseenter");
$('#footer').on('mouseleave', closemenu);
});
}
function closemenu(e) {
if (e) e.stopPropagation();
$('#footer').animate({
height: "33px"
}, e ? 400 : 0, null, function () {
$("#footer").off("mouseleave");
$('#footer').on('mouseenter', openmenu);
});
}
$(function () {
$('#footer').on('mouseenter', openmenu);
closemenu();
$("body").css("overflow", "hidden");
});
Footer CSS:
#footer {
position:absolute;
bottom:0px;
left:0px;
right:0px;
background-color:#0F0F0F;
height:150px;
opacity:0.8;
}