I am using jQuery.toggle and .animate for a navigation menu that sits at the bottom of the page. The nav consists of two divs, one as a outer container and the other as a inner container that holds the nav buttons etc.
What I am trying to achieve is; you click on the nav and it's position animates up and to close the nav you simply click on it again and it animates back down to it's original position at the bottom of the page.
The issue I am having is when you click on the nav buttons nothing happens, it doesn't take you to the link like it should even though the browser status bar shows the target URL.
Here's a link
jQuery:
$('#navContainer').toggle(function() {
$('#navInner').animate({
bottom: '+=350'
}, 400, 'swing', function() {
});
}, function() {
$('#navInner').animate({
bottom: '-=350'
}, 400, 'swing', function() {
});
});
CSS:
#navContainer {
background-color:#0FF;
height:520px;
margin:0px 0px 0px 60px;
position:fixed;
cursor:pointer;
bottom: 0px;
}
#navInner {
background:url(../images/appinstructions/nav2.png);
background-repeat:no-repeat;
width:638px;
height:491px;
position:absolute;
bottom:-350px;
}
HTML:
<div id="navContainer">
<div id="navInner">
<a id="navhomeBtn" href="appInstuc.html"></a>
<a id="navhelpBtn" href="appInstuc.html"></a>
<a id="geBtn" href="http://www.ge.com/" target="_blank"></a>
<div id="pages">
<a href="ipadApp1.html"><img src="images/appinstructions/page1.png" alt="page 1" class="page"/></a>
<a href="app1-1.html"><img src="images/appinstructions/page2.png" alt="page 2" class="page"/></a>
<a href="appRoots.html"><img src="images/appinstructions/page3.png" alt="page3"class="page"/></a>
</div><!--close pages-->
</div><!--close navInner-->
</div><!--close navContainer-->