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
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
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