Why Doesn't "Menu" move with the Body?


#1

If you look at index.html the tag encompasses all the classes -- menu, icon-menu, icon-close and jumbotron. So (here's the question) why do you need to include an animation movement command for both ('.menu') and ('body')? Shouldn't the "menu" move with the "body" since it's contained within it? (It doesn't, by the way, if you try it)

I can get the code to work for hiding and displaying the menu, but I'm trying to understand the bigger picture.

Thanks for the help!


#2

if i have a box, and inside this box i have a other box. And i move the inner box, does the outer box move? No, it doesn't, why should it be any different for html element? You use position fixed on the .menu so you can hide it outside body, does not automatically means that body will shift when .menu is shift


#3

Thanks for the reply. Please help me understand, the reverse of your example should be true, right? -- the "body" is the outer box and "menu" is an inner box, correct? So if I move the "body", shouldn't the "menu" move also? In the code I deleted the $('.menu').animate command and just had the body one. Upon clicking on the "MENU" icon, the picture shifts over but there is just blank space where the menu-html element should be...


#4

ooh boy, you know what position: static, position: relative, position: absolute and position: fixed do? (css code this is), give me a second to think how i am going to explain this


#5

Okay, let's keep it simple. Let's go back to our boxes, and assume boxes can levitate. so we have our outer box (body) and our inner box (.menu). So our inner box (menu) is against the left side of our outer box. Right, now we are going to lift our inner box and keep it levitated (but in the same position), this levitation is caused by position fixed (menu moves independent of body due to position: fixed), now we are going to move our inner levitating (menu) box to the left (left: -285px; from the css file of the exercise))

Now lets say our field of sight ends at the left side of outer box, and we are going to shift the outer box (body) to right, there is a gap (since .menu is out of our sight)

Blah, horrible explanation, i hope it makes a little bit of sense


#6

Thanks for the explanation stetim94, I totally got the visual. So to demonstrate this to myself I went back to the example and changed the .menu CSS position to "relative" and then deleted the $('.menu').animate commands from the app.js file. The layout of the html elements got all screwy but when I clicked on "Menu", everything slid over exposing the menu, just from having a "body" animate command. Thanks again for the explanation! I now have some more practical knowledge and some key areas identified to become more educated on.


#7

I wrote a pretty extensive answer on position (you can find it here), might be worth the read to better understand position: relative and absolute (fixed behaves the same as absolute except it is "glued" to the screen)


#8

I like your explanation. thanks. But the link doesnt work sir?!


#9

You're welcome. Hm... you are right, the link should work now