Responsive Menus

[spacewindow]

Wishlist:

1. responsive menu kicks in at tablet.css media query (100% width mobile, max-width on tablet
2. menu shrinks to drop-down with ☰ aligned to right, leaving header on left (with option of a different ascii character or 'Menu').
3. Menu designed with two levels possible levels of sub-menu (may be excessive).
4. Menu z-index overlays over content rather than pushing content down:

• User will scroll page to navigate menu
• Mobile menu needs a close button at bottom which also scrolls page immediately to top 5) If necessary extra footer navigation list can reveal itself on mobile for very complex pages. 6) Top-level menu items with sub-menus should function only as headings, not as distinct pages. Can link to first sub-menu item page - in mobile layouts this will be disabled to allow hover function to work.

[scottsanders]

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

[tommaitland]

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.

[tommaitland]

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.