Query - why use left - 285 to close the menu?


#1

Hi all,
To complete interactive menu task 7 - we are asked to use left: -285px to close the menu after using left: 0px to open it.
Why are we not using right -285px instead?

As we want to close the menu, don't we have to go the other way? I thought I'd ask as I'm new to coding and this seems counter intuitive to me.

Is anyone able to explain why it works this way please?


#2

Hi Sunnyjeans,

By default, the menu is 285 pixels (that's it's width) off the page, and the <body> is 0, leaving it flush with the edge. When the menu is opened, we push the <body> over 285px to the right so the menu isn't covering up anything on the page, and move the menu over to 0px with the left edge of the page. To close it, we just reverse that process :)
So,

That pulls the menu over 285px to the right, which would work fine (I think) for opening it, but not for closing it. To close it, you would need to use right: 285px instead.
But I think it's probably just better to use the same direction as the edge you're working from, like we are in this case: left :)


#3

Hi Zystvan,
Thank you for the explanation.
Just so I'm clear and understand properly. The reason we can't see the menu is that when its closed it is already 285px to the left and off the page as its default position (invisible to us), and then when we make it 0px its revealed entirely?
Maybe I'm not far enough into my learning to have discovered that yet but I didn't think we could do that. I though we were restricted to the margins of the layout.
This would make sense though as in order to create individual web layouts you need flexibility and this now makes sense. I'm looking forward to designing some webpages :slightly_smiling: :+1:


#4

Yup! You sound like you understand how it's working :)

With position: static, we are basically limited to margins, but absolute, fixed, and relative positioning all let you use top, right, bottom, and left. I remember them with Never Eat Shredded Wheat - it's a rhyme Dash teaches :)

And good luck with making sites! Always remember, you can post in the Job Opportunities and Collaborative Work category if you need help :)


#5

When I use body left: '-285px'.
It is move over the edge of the left. Why is it? I think it will back to the original?


#6

@arccoder15940 I'm not sure I understand your question :confused:

Could you please create a new topic, and someone will help you over there :slightly_smiling:


#7