Basic guide to create off-canvas navigation menu
Hello friends! Today I am here with a guide to build off-canvas navigation menus for your website.Off canvas menus are handy UI elements if navigation items are fixed in count. It can also be used in the other case of varying navigation items but from the User Experience perspective; it seems a bit confusing as the elements are changing.
So to create off canvas navigation menu; following basic elements are needed.
- A toggle initialiser
- Content Container
Using these; method will be
- Initialiser will show the menu
- When menu is open; overlay will make the other parts of page body inaccessible
- Overlay will act as a menu hiding trigger element. Body can also used to trigger the close of menu
So following above method; first we will need our HTML to be ready. Right now the following code will be for the navigation menu on left side. Here we are proceeding with following HTML structure. And the behaviour will totally depend on this HTML structure.
The Off-Canvas navigation menu can be made to appear with the help of either JS or CSS. I am choosing here CSS, as JS lags sometime due to performance issues; so following is the CSS for menu and whole page.
Now is the behaviour;
Now this was the basic behaviour and design. The menu can be customised more to create some awesome navigation schemes. The CSS transitions and animations can be implemented to make it more appealing.
Similar things can be created for the off-canvas navigation menu from top, right and bottom; though bottom position might be least considered for off-canvas navigation.
The above code can accommodate to slide from left or slide from right. Only thing needed is to add the class either
right as per desire.
By default, it won’t push the whole page in respective direction. To do so, it would be needed to add
push class on the page & menu container along with
Depending upon the usability of web app/website; many views can be created. But for now, you can see the From Left, From Right, From Left with Push and From Right with Push examples in the Demo link.