How to build Expandable / Collapsible...

User 2961279 Photo


Registered User
4 posts

Using Site Designer 5.0 3332
Using Foundation Framework 6.6.3.

Hi All,

Consider the AWS Documentation Website:
https://docs.aws.amazon.com/AWSEC2/latest/WindowsGuide/concepts.html

Direct your attention to the sidebar. It has two behaviors I wish to emulate. Firstly, it has the ability to expand in place. When the arrow to the left of a parent item is clicked, it shows all of its child items. Where may I find such a component?

Secondly, (and possibly more interestingly) when the window is collapses below the second breakpoint, this sidebar menu collapses entirely. When the hamburger icon is clicked it expands. I have seen no components that allow for horizontal expansion.

I have done some digging on the forums, and my first choice for solving this issue would have been Menu Designer, however it appears to be long dead.
https://www.coffeecup.com/help/articles/menu-builder-quick-start-guide/
https://www.coffeecup.com/forums/menu-builder/menu-builder-no-longer-supported/

How do I get this working?

Thanks

User 2699991 Photo


Registered User
3,499 posts
Online Now

Timothy May wrote:
Using Site Designer 5.0 3332
Using Foundation Framework 6.6.3.

Hi All,

Consider the AWS Documentation Website:
https://docs.aws.amazon.com/AWSEC2/latest/WindowsGuide/concepts.html

Direct your attention to the sidebar. It has two behaviors I wish to emulate. Firstly, it has the ability to expand in place. When the arrow to the left of a parent item is clicked, it shows all of its child items. Where may I find such a component?

Secondly, (and possibly more interestingly) when the window is collapses below the second breakpoint, this sidebar menu collapses entirely. When the hamburger icon is clicked it expands. I have seen no components that allow for horizontal expansion.

I have done some digging on the forums, and my first choice for solving this issue would have been Menu Designer, however it appears to be long dead.
https://www.coffeecup.com/help/articles/menu-builder-quick-start-guide/
https://www.coffeecup.com/forums/menu-builder/menu-builder-no-longer-supported/

How do I get this working?

Thanks



almost any of the ready-made menu components can be made to act & behave like the example you show. Just a matter of re-styling them. Or better still make your own from scratch

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 122279 Photo


Senior Advisor
13,560 posts
Online Now

As for the menu itself, I guess you could use the component you find in SD by the name of 'Responsive Nested menu'. You would need to tweak it a bit, and also only use the part of it intended for small screens.

The sidebars could be made with a component I have made, which you'll find if you open the second link in my signature, select the Foundation tab and look for 'Vertical menu'.

Maybe others will come up with other solutions. Good luck!
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
3,499 posts
Online Now

I have made a short demonstration video, using the component "Navigation Glass with Drop" and restyled it to look something like what you want.

It IS ONLY INTENDED TO SHOW THAT SOMETHING CAN BE DONE should you think that is close then I can make an instructional video showing how to, I don't do components

https://youtu.be/xkmTSO_ML4Q

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.