vertical expand/collapse nav menu

Henri Isenberg shared this question 5 years ago
Answered

How can I create a vertical left menu with expand and collapse sub-items? The entire menu would need to resize vertically depending on what menu item is selected. I want to simulate the menu in bootstrap 3.0 (like this one: http://wrapbootstrap.com/preview/WB0B...). The bootstrap widgets for JustInMind don't have this kind of menu.

Best Answer
photo

Here's how to create a vertical expandable and collapsable menu:

1) Drag a Dynamic Panel onto the Canvas. Give it a vertical layout and add some vertical spacing

2) In this panel, drag a few Rectangles. These will be the tabs

3) On each Rectangle, right click on it and click 'Group in Dynamic Panel'

4) In each Rectangle's panel, add one more panel for each of them. Each Rectangle should have two panels. The first (default) will be the collapsed state. The second will be the expanded state

5) Drag some elements into the second (expanded) panel

6) On each collapsed panel, create an "On Click" + "Set Active Panel" event, and have it set the expanded panel as active

7) On each expanded panel, create an "On Click" + "Set Active Panel" event, and have it set the collapsed panel as active

Comments (2)

photo
1

Hi Henri,


I share with you some tutorials that will be helpful.


The first tutorial is for expand and collapse sub-items: http://justinmind.com/usernote/tests/...


The second one is for responsive and liquid design: http://justinmind.com/prototyper/lear...


http://justinmind.com/prototyper/lear...


http://justinmind.com/prototyper/lear...


About the bootstrap 3.0 widget library, I will add it to the wish list for a future update.


Best regards.

photo
1

Here's how to create a vertical expandable and collapsable menu:

1) Drag a Dynamic Panel onto the Canvas. Give it a vertical layout and add some vertical spacing

2) In this panel, drag a few Rectangles. These will be the tabs

3) On each Rectangle, right click on it and click 'Group in Dynamic Panel'

4) In each Rectangle's panel, add one more panel for each of them. Each Rectangle should have two panels. The first (default) will be the collapsed state. The second will be the expanded state

5) Drag some elements into the second (expanded) panel

6) On each collapsed panel, create an "On Click" + "Set Active Panel" event, and have it set the expanded panel as active

7) On each expanded panel, create an "On Click" + "Set Active Panel" event, and have it set the collapsed panel as active