Design Vertical and horizontal nav bar with effect

Axure RP 8
1

Capture.PNG948×425 106 KB

I am think to build protype based on this uploaded attachment concept.
Page is having different section:-

  1. Horizontal Menu Nav Bar
  2. Vertical Menu Nav Bar with accordion menu
  3. Hamburger icon which click to shift vertical menu in left side and only Icon should show.

Any help in this…
Thanks

2

Hi @axure_newb,
I’m not quite sure what you are trying to archive. Do you just want to build the navigation behavior?

In this case you can:

  1. put your navigation bars in a dynamic panel and pin it to the browser. So it will be sticky.

  2. then hide the vertical navigation. Add an interaction case OnClick on the menu button and toggle the vertical menu.

  3. do the same with accordion inside the vertical menu. Add an OnClick case on the navigation item and toggle the visibility.

See the following RP-file for a working example: DashboardMenu.rp (58.6 KB)

Edit:
Sorry, I just re-read your posting. In the previous answer I oversaw that you want to minimize the vertical menu. You can archive this by adding states to the dynamic panel mentioned above.
See the edited RP-file: DashboardMenu.rp (86.9 KB)

3

Thanks for your reply and quality help.
I am slowly slowly building complete prototype with as much as possible interaction to give a better feel to users.