I'm trying to make a smoothly appearing menu, how to do it?

Question

css

In general, the essence is this. what needs to be done like this https://markgoodyear.com/labs/headhesive/
The most important thing is that nothing twitches, jumps, and nothing flows, decisions like the bottom block to set which indents are not relevant. I actually did it, but when you lift it up, on this break it just disappears, how to make it slide back smoothly ?? Thank you for your attention!

Answer 1

Here we hang it on the banner:
position: fixed;
transform: translateY(-100%);
transition: all 300ms ease-in-out;
According to JS, we add a class to the block to which the dropdown is attached, on the dropdown class translateY 0%