Vertical Menu

Placeholder Picture

The Menu used on this Site

The demo is the actual site menu, the above is just an image of it. The menu will collapse and disappear off-screen when not in use.

Note that there is a HTML element which is set to display none, containing a small script that makes the menu work.

Editing the menu: Find the container with the class name .sidenav. It has a width of 0px. Change that to e.g. 250px, then it will be visible and can be edited. Set the width back to 0px when you are done.

Hot tip: Make the menu into a 'symbol', so that if you update it on one page, the menu on the other pages will be synced to show the same update.

Placeholder Picture

Download this component