Side menu — live demo

This page is the live demo of nav.nav-wexa.side.collapsible. The navigation on the left is the component being documented. It demonstrates: collapsible expand on hover/focus, pin button, mobile toggle, and aside.appmenu off-canvas submenus.

What this demo shows

nav#nav-content.nav-wexa.side.collapsible — the side nav itself, with pin button and menu items.
button#menu-button — mobile hamburger toggle in <header>, visible below 896 px.
nav#header-nav-content — compact accessibility controls in the header, absolutely positioned at top-right.
Three aside.appmenu panels (Get SPPAS, Discover, Book) registered with MenuManager.registerSubmenu().

CSS provides all layout and transitions (menu.css). JavaScript is only used to manage pin state, mobile toggle, and submenu open/close (MenuManager).

HTML structure

The full running demo is this page's navigation. View source for the complete code.

<header id="header-content">
    <button id="menu-button" aria-controls="nav-content"
            aria-expanded="false" aria-label="Toggle navigation menu">
        <svg ...></svg>
    </button>
    <nav id="header-nav-content" aria-label="Accessibility navigation">
        <button class="menuitem" aria-label="..."></button>
    </nav>
</header>

<nav id="nav-content" class="nav-wexa side collapsible"
     aria-label="Main navigation">

    <button id="pin-menu" class="menuitem menu-pin"
            type="button" aria-controls="nav-content"
            aria-pressed="true" aria-label="Pin menu">
        <svg aria-label="Pushpin">...</svg>
    </button>

    <a class="menuitem" href="#">
        <svg aria-hidden="true">...</svg>
        <span>Home</span>
    </a>

    <button class="menuitem" id="submenu-toggle-get"
            aria-haspopup="true" aria-controls="appmenu-get">
        <svg aria-hidden="true">...</svg>
        <span>Get SPPAS</span>
    </button>

    <!-- aside must be a direct child of nav, never inside section -->
    <aside id="appmenu-get" class="appmenu" aria-label="Get SPPAS submenu">
        <nav class="submenu-orange">
            <p class="nav-section-label">Get SPPAS</p>
            <a class="menuitem" href="#">Download</a>
            <a class="menuitem" href="#">Install</a>
        </nav>
    </aside>

</nav>

JavaScript initialization

MenuManager handles expand/collapse, pin, mobile toggle, and submenu open/close.

const menu = new MenuManager();
menu.initSideMenu();       // wires #pin-menu
menu.initMobileToggle();   // wires #menu-button
menu.registerSubmenu('appmenu-get',      'submenu-toggle-get');
menu.registerSubmenu('appmenu-discover', 'submenu-toggle-discover');
menu.registerSubmenu('appmenu-book',     'submenu-toggle-book');