justinmind-logo
 
Upvote 1

vertical expand/collapse nav menu

Answered Victor Conesa 10 years ago

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

Replies (2)
photo
1

Hi Henri,

Check out these tutorials on responsive and adaptive design, they should be helpful with this.

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

Leave a Comment
 
Attach a file