Question

I am simply trying to slide the main container (and everything within it) out of the way to show a navigation menu beneath when you click the navigate button. When you click it again, the container div moves back over top the navigation menu. It’s UI that’s gotten popular on mobile designs.

Anyway, I have it working just fine in Firefox and IE. Unfortunately, the same cannot be said for Chrome.

http://jsfiddle.net/aXsWz/28/

$(document).ready(function() {

$('div#navNavigate').click(function(){
        $('div#navNavigateHide').show()
        $('div#navNavigate').hide()
        $('div#container').animate({'left':'+=120'});
});  

$('div#navNavigateHide').click(function(){
        $('div#navNavigate').show()
        $('div#navNavigateHide').hide()
        $('div#container').animate({'left':'-=120'});
    });
});  

So, the issue is that the “nav” and “container” divs aren’t moving together.

Any help appreciated. Thanks.

Answer 1

Update::

You have a fixed position rule on the navigation. If you change it to absolute, the animation will run properly:

#nav {
  background:#222222;
  width:240px;
  height:45px;
  margin:0 auto;
  position:absolute;  <-- This was previously "fixed"
  top:0;
  z-index:10000;
}

Working example: http://jsfiddle.net/aXsWz/30/

Take a look at this article to see the difference between fixed and absolute positioning: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

---

The problem is that you’ve nested your toggles inside of the container that gets moved around. If you refactor them to live outside of that container, it works just fine (although you can make quite a few improvements to this js pattern…).

Working example: http://jsfiddle.net/aXsWz/29/

<div id='nav'>
    <div id='navNavigate'>
    </div>
    <div id='navNavigateHide'>
    </div>
</div>    

<div id='container'></div>