Toggle Smartmenu visibility with "Menu" toggle button

Home Forums Older releases 0.9.x Toggle Smartmenu visibility with "Menu" toggle button

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #2434
    hwyckoff
    Participant

    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.

    #2435
    hwyckoff
    Participant

    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.

    #2439
    admin
    Keymaster

    There is a short tutorial in the docs too:

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?