How to display two sidebars on mobile?

Question

I got stuck with dealing making two sidebars for mobile screens. How I can make responsive to display nice on mobile? Maybe it's some pattern?

Thanks.

Answer 1

Two usable options come to mind.

1. Accordion menus

2. Sliding panels

Answer 2

I create a little prototype to deal with this situation on devices with little space. You can find it here http://5rsg1w.axshare.com/

1. First you show your users a Menu-Button
2. Then the first level navigation apear
3. After clicking on one of the link the user will see the second navigation
4. Then the user can click on the link 1 or on one link of the second level navigation

https://i.sstatic.net/AFl3z.jpg

The dissadvantage here is: the user have to click twice to reach a link on the first level navigation. You can improve this by adding a splitbutton-pattern on each link:

1. “Link to this target”-Link
2. “To next deeper level”-Link

https://i.sstatic.net/UC0Zr.jpg

This example is shown on the second page of the demo.

Answer 3

Can you elaborate more ? Are you seeking an answer from
user-experience/programming perspective ?

If programming, then you should search for three column layout design such as

This or This

Additionally, if you really want to see more creative and clean design of the sidebar while learning how to structure your web application and other great tricks.Check this codyhouse. They have implemented a clean, user-friend and responsive sidebar (Demo) and (source-code).

Hope this useful.