Make Sidebar a headder instead- but keep jquery function?

Hey everyone, I am trying to adapt this design..( https://www.newghost.net/TRY.html) right now the sidebar animates when you click it and goes to hiding… on the right side of the page…

I am trying to get the side bar to come from the top- so that it spans across the top and when you click it it goes to hide away up in the top. (and not the right side….) I would like to keep the function it has as it moves… Would eventually like to put some buttons on this bar…I am adapting from a template design from another source, to rework. I played around with moving the div tag and the inline content and I know there is a connection I am missing.. I understand how the jquery function works but the link between that and the css is stumping me. I am a beginner so I apologize in advance…

Any thoughts on how to make this work? I feel like I have hit a wall..and am practicing and working out the kinks.. I am not looking for an easy answer but more so a specific direction I need to go with the coding I’ve been working on. Not looking for a “you are a noob, go teach yourself…” because thats something I already know and am doing…teaching myself…

any advice, or resources on the specifics that I am missing, or how-to is appreciated. Below are my css/html docs…. If I need to post the jquery docs let me know… I can do that too.. I am having difficulty understanding the connection between jquery and the css, even though I have been told that its a simple connection.

Here is my css document:

[Code moderated as per the Forum Rules]