Nested menus on small screen

Question

I have a small number of pages but one page had a few sub pages.

In mobile I was happy to have the nav open like so.

More sub pages have now been added to the sub pages so the mobile nav looks like

If it's always open, I think this is too long.

I could hide the sub menus of 'Three 2' and 'Three 5' but I'm not sure how I could show them

'Three 2' and 'Three 5' are pages with content so clicking on these links will take you to that page and you would never see their sub menus.

How can I keep the sub-menus accessible while keeping the menu small?

Answer 1

Rather than doing a vertical expansion of items, perhaps try a more layer-based approach could help simplify. Rather than showing a long list of items, you could showcase a "stack" of sorts which allow the user to track where they were while seeing the options relating to their selection.

View an example: http://tympanus.net/Development/MultiLevelPushMenu/index.html

In the spirit of proper mobile use cases however, @FodderZone is spot on. It seems like your menu could stand to be paired down/re-thought (as far as content is concerned).

Answer 2

It sounds like you need to rework your menu system/grouping. For a mobile application this seems like too many menu options.

Assuming you keep the same grouping you could consider collapsing all groups except the one you are in. That includes any sibling level menus. Example assume Three 5 - 3 is selected. Your menu would look like this:

• Top One
• Top Two
• Top Three
  • Three 5
    • Three 5 - 1
    • Three 5 - 2
    • Three 5 - 3
    • Three 5 - 4
    • Three 5 - 5

This allows access to all current level options and a way to get to all other levels. Of course all of this is difficult to say with context of the application.