Reassess Navigation implementation

[andybraren]

As an option, allow site owners to choose collapsing site navigation for small screen sizes instead of the default scrolling behavior.

https://codepen.io/johnmears/pen/vhJKL?q=%20overflow%20menu&order=popularity&depth=everything&show_forks=false

https://dribbble.com/shots/2426167-Header-Transition-for-a-Website

• Remake it
  • https://iamsteve.me/blog/entry/horizontal-scrolling-responsive-menu
  • https://iamsteve.me/blog/entry/multiple-level-horizontal-scrolling-navigation
• Notes to self
  • The TidBITS menu animation is very nice on mobile
    • Ensure that the HTML is correct, like not having div's in ul's
    • Would it make sense to allow readers to customize the menu they see? It's an unexpected pattern, but there might be a use for it. Hiding the store page. Eh.
    • Solutions for displaying submenus on touchscreens without hover
      • Nielsen Norman Group describes 3 possible solutions: including a link to the page within the submenu, changing the behavior after the first tap, or removing access entirely (probably not advised)
    • Multiple navigation styles
      • http://navnav.co/
      • https://www.mackweldon.com/t/tops
      • Usability implications of a centered logo
      • Tree testing methodology is a better way of determining good categories than card sorting
      • Hidden navigation quantitatively performs worse than visible nav
      • https://www.smashingmagazine.com/2017/05/basic-patterns-mobile-navigation/
      • https://www.smashingmagazine.com/2017/04/overview-responsive-navigation-patterns/
      • Centered logos are less discoverable, and maybe a Home link should be included in the menu
      • http://uxmovement.com/navigation/5-common-design-mistakes-on-navigation-bar-buttons/
      • https://medium.com/@kollinz/hamburger-menu-alternatives-for-mobile-navigation-a3a3beb555b8
      • Example, using jQuery
      • https://css-tricks.com/priority-navigation-scrolling-dropdowns/
      • Priority Nav/Tab Scroller (many kinds)
      • !!! Good example https://nigelotoole.github.io/priority-nav-scroller/
      • https://css-tricks.com/container-adapting-tabs-with-more-button/
      • https://css-tricks.com/squeezy-stretchy-flexbox-nav/
      • https://codyhouse.co/gem/stripe-navigation/
      • Usability implications of sub menus on mobile
      • Collapsing rather than scrolling (example)
      • https://inclusive-components.design/menus-menu-buttons/
      • Mega menu
        • Beware of unintentional hover
        • http://www.nngroup.com/articles/mega-menus-work-well/
        • See the "How-To Tutorials" menu on Envato