Reply To: Toggle Smartmenu visibility with "Menu" toggle button

[hwyckoff]

I figured it out, and it’s not really all that difficult.

In the html (or in my case, aspx):

   <nav>
       <div><a>☰ Menu</a></div>
       <asp:Literal ID="SitemapList" runat="server"></asp:Literal>
       </nav>

And in my scriptblock:

<script type="text/javascript">
        $(document).ready(function () {
            $('#NavigationMenu').smartmenus();

            $('#ToggleMenu').click(function () {
                $('#NavigationMenu').toggle();
            });
        });
    </script>

The default is the menu tag is visible and the menu is hidden until the menu tag is toggled.
A media query reverses it for tablets and desktops, so the toggle hidden and the menu always defaults as visible.

Default css is for mobile:

#ToggleMenu
{
    display: block;
}

#NavigationMenu
{
    display: none;
}

A media query is for anything larger than 40em.

@media (min-width: 40em)
{
    #ToggleMenu
    {
        display: none;
    }

    #NavigationMenu
    {
        display: block;
    }
}

It’s pretty stable to me and I haven’t managed to break it yet.