<div data-ui="menu-background" class="iqel-menu-background">
    <!-- background element catching clicks to close menu - fixed position behind overlay -->
</div>

<div data-ui="menu-frame" class="iqel-menu-frame">
    <div data-ui="menu-header" class="iqel-menu-header">
    <!-- header displayed when moveable option is checked -->
        <div data-ui="menu-drag-bar" class="iqel-menu-drag-bar">
            <svg width="40" height="30" viewBox="0 0 40 30" xmlns="http://www.w3.org/2000/svg">
                <circle cx="8" cy="10" r="2" fill="gray" />
                <circle cx="20" cy="10" r="2" fill="gray" />
                <circle cx="32" cy="10" r="2" fill="gray" />
                <circle cx="8" cy="20" r="2" fill="gray" />
                <circle cx="20" cy="20" r="2" fill="gray" />
                <circle cx="32" cy="20" r="2" fill="gray" />
            </svg>
        </div>
        <div data-ui="iq-button" class="icon-only close"></div>
    </div>
    <div data-ui="menu-content" class="iqel-menu-content">
        <!-- menu content template will be loaded here -->
    </div>
</div>
