Toggle Smartmenu visibility with "Menu" toggle button

[hwyckoff]

Maybe I missed it somewhere, but I didn’t see it in a word search so far. The appearance of Smartmenus in desktop is perfect, and when I switch to a mobile browser, it switches to a vertical menu perfectly.

However, the mobile menu takes up a lot of vertical space. Is there a way to tell Smartmenu to show a “menu” icon by default and only show the menu when the menu icon is pressed? Before I try to make this functionality myself, I want to make sure that it doesn’t already exist in the Smartmenu code.

[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.

[admin]

There is a short tutorial in the docs too:

http://www.smartmenus.org/docs/#menu-toggle-button

[Author]

Posts