Multiple off-canvas menu

[artefact]

Hi

I would like to know if there is a way using http://www.javascriptkit.com/dhtmltutors/offcanvasmenu.shtml to get two off-canvas menu, one on top and one on left. The idea is to create an admin panel with 2 a panel on left and a panel on top, both toggle at the same time by clicking a button. It should push the main content right-bottom.

Any help would be appreciated

Greg

[Beverleyh]

It's a pretty comprehensive tutorial that explains, very well, how the "checkbox hack" can be used to style sibling elements when checked; in this case, shifting the position of a menu and container div with CSS property transform:translate3d(x, y, z);

Try following the tutorial in a test page but manipulate the translate3d values so that the positioning/movement happens along the y axis instead of the x axis. You will probably want to change some classes and ids so that they relate more to a "top-down" menu.

You can read more about translate3d here http://tympanus.net/codrops/css_reference/translate3d/
And you can read more about the checkbox hack here https://css-tricks.com/the-checkbox-hack/

When you have your "top-down" test menu setup and working properly, try combining the two menus in one page.

Post back if you need help with various stages, providing links to your reduced case demo pages and your work so far.