Side Menu Takeover Interaction
Feb 1, 2023
Class breakdown
Page Wrapper
This is the wrapper in which all content of the page should be contained. It's needed to move the whole page on the x-axis in the interaction.
Menu Wrapper
In order for this interaction to work, we need a menu wrapper. This wrapper has a fixed, full position, meaning it lays on top of the whole page at all times.
It also has a hidden overflow, hiding the menu that sticks out to the right of the page. This is important in order to not cause a horizontal scroll bar.
The menu wrapper is also display: hidden as default, only getting shown (display: flex) when activated through a click interaction.
Its flex settings are aligning its children to the right.
Menu
The menu itself is a simple div with a set width, some padding and a background color. Its width is set to and arbitrary number of 25 REM, and its height is set to 100%, causing it to span the whole 100 VH of its parent wrapper.
It also has a flex setting of justify-content: space-between vertically, causing its children to spread out from top to bottom.
The interaction
The menu open interaction is set on the Nav Button class. It starts off by showind the hidden Menu Wrapper. Then it moves the Page Wrapper from 0 REM to -25 REM (the width of the menu) to the left on the x-axis. The Menu takes over this empty space by moving from 25 REM to 0 REM on the x-axis.
As a small detail I'm also scaling down the initial Nav Button from 1 to 0, making it impossible to click it again, while the Nav Button + Nav Button Menu scales in reverse from 0 to 1, making the user able to click it.
The Nav Button Menu closes the menu since it has the Menu Close interaction attached to it. This interaction is just a reverse of the Menu Open interaction.