Responsive_Navigation_Patterns(响应式导航模式)

1. Top toggle menu

   • Pros(优势):
   • one button in header maximizes space for content on a small screen
   • important items stay visiblein most screen sizes and you decide the item priorities
   • legibility of navigation items is maintained with adequate spacing, by automatically hiding items that don’t fit
   • Cons(缺点):
   • navigation items might be less discoverable because some items are hidden in the drop-down or toggle menu
   • users may not notice the button contains a navigation menu in the smallest screen size
   • one more step is needed to access the hidden navigation items

2. Expandable bottom menu

   • Pros(优势):
   • expandable menu is easy to discover
   • important items are always visible and you decide the item priorities
   • legibility of navigation items is maintained with adequate spacing, by automatically hiding items that don’t fit
   • Cons(缺点):
   • one more step is needed to access the navigation items that are hidden
   • navigation items might be less discoverable because some items are hidden
   • less space for content in the smallest screen size

3. Left hidden menuLeft hidden menu

   • Pros(优势):
   • potentially displays more navigation items in a left navigation compared to a top navigation
   • most items are always visible except in the smallest screen size
   • one button in header maximizes space for content on a small screen
   • Cons(缺点):
   • navigation items might be less discoverable because some items are hidden in the drop-down or toggle menu
   • users may not notice the button contains a navigation menu in the smallest screen size
   • one more step is needed to access the navigation items that are hidden

https://developer.mozilla.org/zh-CN/Apps/Design/Responsive_Navigation_Patterns