Responsive Menus about base HOT 3 OPEN

Thanks Rob, good considerations. A few visual ideas:

Scrollable/Swipeable

We could have a scrollable horizontal list, which can pan left and right with touch/swipe. Then on a drop down a nother horizontally scrollable menu appears below.

Flyout

We could use a similar concept of a vertical sidebar which slides out over the concept from left or right. http://prgr.es is using a menu like this.

Fullscreen

We could take over the whole screen and present the vertically scrollable menu on touch.

Footer Anchor

Smashing Magazine has a good example of using the footer as the responsive menu and just anchoring to it on touch: www.smashingmagazine.com/#mobile-navigation-footer

from base.

Some thoughts on this:

4. think a close button might be excessive, the menu should drop down below the ☰ character, effectively making it the close button
5. I think one mobile menu is probably enough as core, not sure about the advantages of a footer menu
6. I think it'd be cool if we can keep sub-menu headings as links, as this is how they'll often display, but there is a collapse icon added in to show the submenu (clicking on the li instead of a for example.

Disadvantages of adding this to Base

• It will require a Javascript file solely for the responsive menu. I'm not completely opposed to this, but if we could explore CSS-only ways that'd be really cool. If not we may need to work out a best approach for JS moving forward.

from base.

Re @scottsanders layout thoughts - I think for Base it's best to keep this as vanilla as possible, and flyout/side navigation may be too much for core (maybe cool to make modular). It would have quite a few more JS dependancies, and not suit every site Base is used on.

from base.