I’m trying to make a vertical navbar but I’ve ran into a little issue. When you click the hamburger menu I want it to open the navbar and then move the hamburger menu to just outside of the navbar. Here’s a respresentation of what I mean:
The easiest way would be to have the hamburger as part of the nav so when the nav slides out the hamburger slides with it.
It’s hard to give an answer without seeing what you have got already and what are the constraints of your design.
I would avoid trying to do it with js because you want the elements to take note of their surroundings in a responsive environment and adjust automatically to the available width. However if you have controlled the nav properly you should be able to allow room for the nav to be moved as required even with js.
Again it all depends on what else is happening on the page.
Generally I let a left vertical nav slide out and on top of the hamburger (so you can’t see it) but include a close icon in the nav itself and avoid the issue altogether.
If you have some code we can look at or a rough demo I’ll be back tomorrow.
The transition rule creates an animated transition when certain properties change. If for example you move an element from one position to to another then it appears to slide into position rather than going immediately from one to the other.
pointer events with a value of none stops the element being clicked or interfering with anything on the page. Imagine you had an element that covered all the content on the page and you could see the content under a faded background. Usually you would be unable to interact with the content underneath but pointer events will allow the element on top to not accept clicks or interaction and you can click elements underneath.
I used it in the above example because part of the fixed nav is still clinging to the left side of the page (although invisible) and I didn’t want it blocking any of the normal page content while it was inactive.