A responsive menu with vanilla Javascript and CSS transitions. Looking for a simple and clean solution to create offcanvas left and right menus, we decide to create this little framework, feel free to expand and collaborate. It just works!
Include in your code the following files:
<link rel="stylesheet" href="path/to/offcanvas-muscle.css">
<script src="path/to/offcanvas-muscle.js"></script>
The following are the mandatory HTML code that Offcanvas Muscle needs to work
<ul class="offcanvas left" id="offcanvas-left-menu">
...
</ul>
<div class="offcanvas-site-wrap">
<!-- Left Menu Button -->
<a id="trigger-left-menu" class="nav-button left" offcanvas-menu="offcanvas-left-menu"></a>
<!-- insert the rest of your page markup here -->
</div>
Later add this function when your DOM is ready:
/**
* Create a new object OffcanvasMuscle for each menu
*/
var offcanvasMenu = new OffcanvasMuscle({
menu: "offcanvas-left-menu",
button: "trigger-left-menu"
});
Thanks to Pure CSS Off-screen Navigation Menu by Austin Wulf which was our starting point for this project.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent