Need help with creating a menu with on-click animation in one of website sections

Custom code
1

I have a problem that can probably be solved using a custom code, but I don’t know where and what to look for.

I have a page with several sections that animate on-scroll.

In one of the sections, I want to have a menu on the left side with “Strategy”, “Product”, and “Brand” to choose from. When a user clicks on “Strategy”, “Product” or “Brand” a different text widget appears on the right.

I tried with on-click animation but there is a problem with layer stacking – for example when text that goes with “Brand” is on a lower layer than text that goes with “Strategy” the first text won’t be visible after clicking “Brand” because “Strategy” text will be always on top.

I assume that I may need a custom CSS code, but I don’t know where and what to look for. I tried contacting Readymag support, but their answer was that on-click animations might come a bit limited for this use case and that they can recommend on-hover animation instead – unfortunately, I can’t take advantage of it – it has to be on-click.

I hope that some of you know what to do about this situation or guide me where to look. Thanks!

Screenshot 2022-11-01 at 12.34.33
Screenshot 2022-11-01 at 12.34.333004×1302 315 KB

2

@HEADLESS.HORSE @neueMeta – guys, maybe you can help? I saw the “multiple types of hover animations” thread and I am thinking about a pretty similar solution, but unfortunately, I can’t code it myself. I will be sooo grateful! :raised_hands:t3:

3

hey @MGembala,
well, yes this is only possible within RM if you only have two sections, like “Strategy” and “Product”.

If you want to achieve it with three sections, you need to build a javascript or jquery function, that checks if a section is “open” right now and depending on what you click to fade in / out the desired section content.
This is a basic structure as how a really easy approach could look like.
The exact syntax for the code you have to figure out on your own. This only gives the idea of the method behind it:

on click on "strategy" {
if (strategycontent = visible) {
do nothing
}
if ("productcontent" = visible) {
productcontent.fadeout();
strategycontent.fadeIn();
}
if ("brandcontent" = visible) {
brandcontent.fadeout();
strategycontent.fadeIn();
}

}

on click on "product" {
if (productcontent = visible) {
do nothing
}
if ("strategycontent" = visible) {
strategycontent.fadeout();
productcontent.fadeIn();
}
if ("brandcontent" = visible) {
brandcontent.fadeout();
productcontent.fadeIn();
}

}

on click on "brand" {
if (brandcontent = visible) {
do nothing
}
if ("strategycontent" = visible) {
strategycontent.fadeout();
brandcontent.fadeIn();
}
if ("productcontent" = visible) {
productcontent.fadeout();
brandcontent.fadeIn();
}

}