I’m prototyping an actual web page for future changes. It has multiple columns and the items in each column are very close. In the middle of one column is a banner that, on the real web page, displays a dropdown image that has a link on it. You can hover over the banner, slide the mouse down to the image and click the link which is in the bottom right corner - not adjacent to the banner.
Originally I hid the dropdown image and set the banner to:
Case 1: OnMouseEnter > Show Dropdown slide down push widgets below
Case 2: OnMouseOut > Hide Dropdown pull widgets below
That works nice, but you can never click the link on the image as the OnMouseOut hides the darned image/link.
I found a posting that suggested:
Remove the OnMouseOut case
Change Case 1: Show Dropdown slide down treat as flyout
That’s lovely and allows me to click the embedded link, but now I need to push down the widgets below as the dropdown covers them while displayed.
Is there any way to use flyout with push down, or is there some other, better way to accomplish this?
The only remaining issue is that if I move my mouse to the banner (Case 1: OnMouseEnter > Show Dropdown slide down push widgets below), then slide my mouse OFF the banner without touching the dropdown, the dropdown remains until I mouse over it and off of it.
My boss tells me it’s more important to simply show the dropdown and disappear the dropdown when moving off the banner. He’s not concerned with actually being able to click the embedded link on the dropdown.
So, I go back to my original solution and no longer need an answer to this one. Except, of course, for intellectual curiosity and a stubborn, unanswered challenge.
One idea to build off MurrayEaton’s setup is to group the banner and its dropdown image, and then create the OnMouseOut case on the group instead of on the image. To access the OnMouseOut event for a group, click the “More Events” dropdown in the Inspector: https://www.screencast.com/t/kNrB9RZJdT.
And here’s an edited version with that setup: Drop v3.rp (61.9 KB)
My only question is why make the dropdown a dynamic panel? I made a copy of yours, re-did the demo without a dynamic panel, and it works fine. Drop v4.rp (69.2 KB)
Well, almost. The display of the dynamic version is much smoother. In my copy, the widgets below are pushed before the dropdown slides down. Doesn’t look as professional.
I was going to ask why every example I see uses some form of dynamic panel when the same things can be accomplished without. Maybe I’m just a little gun-shy of dealing with those fancy panels - something about the extra possible mess-ups and figuring out how to fix 'em.
Now that you solved my problem, can you tell me a little about the decision to use dynamic vs. non-dynamic panels? What do you gain?
Oh, by the way, I’m uploading my messy example for you to play with - you’ll see the difference immediately.
You can smooth out the animation by adding an animation effect—the dynamic panel version has a “swing 500ms” on it. Once you add it to your non-dynamic panel version, it will be smooth too.
Ah, I was just building off of MurrayEaton’s sample file which already included the dynamic panel setup. As skb mentions, adding a swing animation for the push and pull will smooth things over. In short, your current approach is entirely fine, but read on to learn more about possible issues unique to groups versus DPs.
There are still pros and cons for using either a DP setup or group setup for your accordion.
Generally speaking, using groups (without a DP) is sufficient for building a simple accordion wherein each submenu consists of a single shape like in your original sample. There’s also no significant overlap between submenus in your file. Your current setup also avoids the common complications of persistent accordions since only one of the submenus is displayed at one time.
However, a DP setup may be more appropriate if you plan to build a much more complex accordion with more overlapping submenu widgets and persistent submenus where multiple can be visible at once. A “complex” accordion could also mean that each submenu contains a large number of widgets that overlap with other components on the page; “complex” could also mean that you’ll be creating nested submenus in multiple layers.
The following article helps to explain this kind of issue affecting grouped versus DP accordions:
In other words, push/pull interactions affect all grouped widgets in the push/pull path. And so if you have widgets in one group of a submenu overlapping widgets of another accordion group (that might be set to hidden), then pushing/pulling the widgets in a submenu can cause some overlapping portions of the accordion to get repositioned in an unexpected way.
To help avoid that specific complication, wrapping each submenu in a DP serves as a way to contain all widgets of a submenu so that push/pull affects the DP as a single unit.
Here’s an example that shows how push/pull can (unexpectedly) push overlapping grouped content:
To demo this, try showing the second banner first and then showing the banner above it afterward. You’ll find that content of the top submenu will have been pushed down by the initial Show action of banner 2.
Although this is actually expected behavior, it’s difficult to predict/visualize because the submenu groups are set to hidden, but they’re still in the push/pull path.
I’ve already run into the issue of not using DPs and having only some widgets pushed/pulled. Sent me back to the forums and I did find that answer. Surprising, but logical and reasonable.
I ran into something else where I had dropdowns overlapping other dropdowns, not using DPs, and depending on the order of expand / contracting each section, I got leftover detritus at times. The leftovers were the size of the full panel but missing some of the items on them. Weird, I know, and I’d send you a sample, but it’s messy first-timer stuff and probably not worth looking at.
After reading your post I’ve started using DPs whenever I have a dropdown, mostly for cleanliness and ease of maintenance sake. Just seems easier now. Wonder what put me off DPs in the first place??
