Smf2.1: main menu oddity

[Kindred-999]

Shrink the windows down to trigger the mobile view...

the pop-up menu icon appears to the left AND the main menu remains...

Honestly, I think that the main menu should convert to icons only at tablet size... and then to pop-up menu only at phone size... either way, however, the popup and regular menu should not be on the screen at the same time

[XinYenFon]

Our case study with ResponsiveCurve mod clearly showed that, icon only menu confused basic users more. So I'll keep it this way so people won't get confused over it, on tablet (you need to clear the version/model etc...) we can keep the menu as is.

Hmm...I thought I decreased that pop-menu to 480px... I'll look into that tomorrow.

[frandominguez03]

Now that we're talking about the menu, personally I don't like that is displayed as a popup in mobile devices. It's cool, but honestly it's not necessary to have it as a popup. I'd prefer to have it static. I've tested it and it improves the navigability, IMO. If we make it static, we'll also be solving #3765

[Sesquipedalian]

... make it static ...

One easy and clean way to do that would be like this:

HTML

<a class="responsive_menu_toggle"><span class="menu_icon"></span></a>
<ul class="dropmenu responsive_menu">
    <li>button1</li>
    <li>button2</li>
    <li>button3</li>
</ul>

JavaScript

$(document).ready(function(){
    $("a.responsive_menu_toggle").click(function(){
        target = $(this).next();
        $(".responsive_menu.visible").not(target).removeClass("visible");
        target.toggleClass("visible");
    });
});

CSS

@media (min-width:500px)
    .dropmenu {
        display: block;
        /* More CSS to display the menu horizontally */
    }
}
@media (max-width:500px)
    .dropmenu {
        display: none;
    }
    .dropmenu.visible {
        display: block;
        /* More CSS to display the menu vertically */
    }
}

[Sesquipedalian]

Forgot to mention that one needs to use a @media query in the CSS so that below a certain width the <ul> is vertical and hidden by default and the toggle is visible, but above that width the <ul> is horizontal and the toggle is hidden. The CSS I included in the above would go within the @media query's conditional CSS.

[live627]

yall could also look into https://github.com/live627/remu