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
4,782 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
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 122279 Photo


Senior Advisor
14,447 posts

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

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
4,782 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
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/

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.