A simple accessible toggle that opens and closes a menu on mobile.

HTML

<button class="lotgrafix-menu-toggle" aria-expanded="false" aria-controls="lotgrafix-menu">Menu</button>
<nav id="lotgrafix-menu" class="lotgrafix-menu">
    <!-- Your menu here -->
</nav>

CSS

.lotgrafix-menu { display: none; }
.lotgrafix-menu.is-open { display: block; }

main.js

var toggle = document.querySelector( '.lotgrafix-menu-toggle' );
var menu = document.getElementById( 'lotgrafix-menu' );

if ( toggle && menu ) {
    toggle.addEventListener( 'click', function () {
        var open = menu.classList.toggle( 'is-open' );
        toggle.setAttribute( 'aria-expanded', open );
    } );
}
«
»