Where did I go wrong.

Question

So I've been trying to get this sliding menu going but I keep running into the dumbest problems. You know those problems that really just need another set of eyes cause I've been looking at this for the past few days on and off.

https://code.sololearn.com/WPVySTRRlm0o/#

This is the code I'm dealing with. Keep in mind that it's going to be sliding over a webgl application for my new web app. I could really use some experienced eyes to show me what i'm missing. The overlay layer shouldn't be over the main page but simply sliding over it. Once I get the positioning right I'm going to be working out getting the interval timing right. wanna figure out whether I should use css animations or transforms.

Answer 1

In your CSS on the #overlay block add a height. You just added width so it will be the height of the text. Add:

height: 100; or height: 100vh;

vh = viewport height (the height of the browse screen). If you wanted it sliding down, and I read this wrongly add a - negative value to it, and use a trigger to add an additional class to it that will make position as default. When I say trigger I mean Java script raw, or jQuery syntax.

Answer 2

Thanks, knew I'd been looking at this too much. All is well now. Still got animations and timings to go but...one step closer. thanks again.