I am attempting to make a white shaded pane (in the form of a div) fade in behind a custom dropdown menu I have built on my website every time the menu is opened. I have an interaction set up to drop that menu down when I click “Communities” at the top. So the thing is… I was hoping I would also be able to make that click activate the white shaded layer as well (behind the menu - taking focus away from other parts of the website and placing more emphasis on the dropdown menu) however I don’t think it is possible? Or at least not how I am attempting to do it.
I might ditch the white-pane idea all together, but hey hopefully someone has a crafty solution!
P.S. Would it make sense to craft a Click interaction with an immediate Scroll-activated interaction that occurs as a result? Because I force the pane to move into view - which might trigger a scroll Interaction and activate the white pane? Just a wild thought.
I hope I got you right, and can tell you it is absolutely possible.
First of all sure we assume you add this shade/overlay div. After styling you can make it display: none + opacity:0% by default.
Then all you need is add one more trigger to interaction on button “Communication”.
Choose click trigger and make it affect different element. Then you choose class of this shade/overlay and make 2 steps interaction on first click:
1st step = display: block, 2nd step = opacity 100%
and 2 steps for second click:
1st step = opacity: 0%, 2nd step = display: none.
@sabanna Trying to apply your explanation to a similar scenario, whereby I want to cause several show/hide interactions to be controlled at once from a single button.
In my case, I thought I could specify a list of elements (by class name) to be affected by an interaction. But it seems I can only specify one element, even though the Interaction field description says “element(s)”
In the following screenshot you can see where I begin to type the name of another element (class name) and no selection list appears.
Yes, @mmediaman, there you can see “ELEMENT(S)”, because interactions affect CLASSES, but not particular elements. So with one class name you can affect many elements.
If you want to create ONE interaction, which affect FEW CLASSES, then you will want to use several triggers inside (as I can see on your “Expand all” button.
But in your case, I would suggest to create one “global” class for all Dynamic lists and use it in that interaction.
@sabanna thank you for that clarification. In this case I am maintaining separate class names for each food category button because I want to ensure the interactions for each button is constrained within each button.
Defining multiple click triggers works fine for what I wanted.
When you have many elements which has same purpose, but need to be separated in the same time, you can use “Combo classes” created from 2 “Global classes”.
In your example it would look like this:
you create global class “Menu list” and then global classes for every type of food: “Breakfast”, “Dinner”, “Soups”, etc…
Then you give this classes to dynamic lists: “Menu list” “Breakfast”, “Menu list” “Dinner”…
In this way you will be able to use class “Menu list” when you need to affect all dynamic lists and use “Breakfast” only for affect Dynamic list with Breakfast food.
But will repeat it again: it only possible if combo classes WERE GLOBAL at first.
