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!

See the Demo

Later add this function when your DOM is ready:

import OffcanvasMuscle from './offcanvas/offcanvas'

const transactionTables = document.querySelectorAll('[data-toggle=offcanvas]')

transactionTables.forEach(trigger => {
  const menu = new OffcanvasMuscle(trigger)
})

The following are the mandatory HTML code that Offcanvas Muscle needs to work

<nav class="offcanvas offcanvas--left" id="left-menu">
...
</nav>

<a class="offcanvas__trigger offcanvas__trigger--left" data-target='left-menu' data-toggle="offcanvas">
</a>

Thanks to Pure CSS Off-screen Navigation Menu by Austin Wulf which was our starting point for this project.