Copy link to clipboard
Copied
Hello,
I'm trying to find out if it's possible to change the shape/size of a rectangle (or other shape), when hovering.
In my particular case I would like a menu bar (rectangle) to drop down, changing it's height. And perhaps with a transition animation also?
Is this possible at all?
Thanks in advance!
Regards,
Mikael Forsberg
Uwe: I think there is no viable solution „out of the box“. Your solution works, and can be refined by adding a vertical animated background fill to the states button, but the problem remains: The hover area includes the whole size of the button. Consequence: If you hover over the invisible part of the states button, the red area will expand too.
A nice solution would be an accordion panel with identical background colour for the title and the content area. But accordions unfortunately don’t ope
...Copy link to clipboard
Copied
Do you think of something like this: expandable-header ?
You can download directly from the browser/website.
You could also use an accordion, if you like. But it is quite tricky if used with menu but expands.
Uwe
Copy link to clipboard
Copied
Mickeforsberg wrote
Hello,
I'm trying to find out if it's possible to change the shape/size of a rectangle (or other shape), when hovering.
In my particular case I would like a menu bar (rectangle) to drop down, changing it's height. And perhaps with a transition animation also?
Is this possible at all?
yes it can change shape and active height but the actual height will default to the max (includes all states)
so a big square can become a small square on rollover but it is still treaded as a big square by the html code
p.s, thats why accordions have issues with small devices
Copy link to clipboard
Copied
Uwe: I think there is no viable solution „out of the box“. Your solution works, and can be refined by adding a vertical animated background fill to the states button, but the problem remains: The hover area includes the whole size of the button. Consequence: If you hover over the invisible part of the states button, the red area will expand too.
A nice solution would be an accordion panel with identical background colour for the title and the content area. But accordions unfortunately don’t open/close on hover as Mickeforsberg wants.
However: A perfect solution is provided by 3rd party widgets, providing the missing accordion feature „Open/Close on hover“.
There are two widgets, which are able to add this feature to the standard accordion widget:
A free one by iVi Design https://www.ecwid.com/store/ividesign/iVi-Widget-Accordion-Hover-p85247163
and a subscription based by MuseThemes: https://www.muse-themes.com/collections/adobe-muse-widgets/products/accordion-hover, which doesn't work really reliable In the actual version of Muse.
Using one of these widgets, you will get this result: http://accordion-hover-test.businesscatalyst.com/index.html
But I am not sure, if something like this is really good web design: As Ussnorway stated, hover effects are not applicable on mobile devices. There is no „hovering“.
Copy link to clipboard
Copied
Thanks for the tip with the new widget from ivi.
Like the one which closes automatically. And the other one is quite cool, too.
The top one could "work" for menu as well. What do you think?
As Mickeforsberg has nothing written about mobile, I think this could be a quite nice solution.
Yes, I agree totally with both of you Günter Heißenbüttel and Ussnorway. Rollover is of course not suitable on mobile.
There waa a thread recently with rollover for mobile as well, wasn`t it?
Waiting for some rain now …
Uwe
Copy link to clipboard
Copied
fotoroeder I think too, this widget would be quite suitable for self closing accordion menus!
Copy link to clipboard
Copied
Thank you all for your help! I think the resulting accordion you posted is pretty much exactly what I asked for, Günter.
Perhaps it isn't a very good option if using both desktop and mobile. How does it work when on mobile? Press once for open, press again to close?
/Forsberg
Copy link to clipboard
Copied
On mobile, it only closes when you tap onto the accordion’s titlebar.
As I said: An accordion is an accordion and not a menu …
Copy link to clipboard
Copied
I see!
I actually wanted to create something like this, when each button is hovered/pressed an accordion drops down with some additional text about each selection. I guess an accordion isn't quite what I needed to achieve that... can't figure it out
Copy link to clipboard
Copied
This isn’t possible with an accordion, because an accordion’s title bar only is able to trigger one „sheet“. You want to trigger 5 different targets with one accordion title. This won’t work.
You may experiment with nested accordions. It is not exactly, what you are looking for but …
One more option is using a states button, containing some accordions:
But you won’t get around the „automatic closing“ problem on mobile devices.
You may also test a composition instead, which you can set to „show target on rollover“ and „hide initially“. In this case you may use the vertical transition, but this only works bottom-> top and not top->bottom. And: You will need a close box to hide the targets. Automatic hiding by rollout isn’t possible in this case.
You may use this 3rd party widget to achieve what you want: https://www.muse-themes.com/collections/adobe-muse-widgets/products/rapid-reveal. Otherwise you have to rethink your layout, or – if you can’t go without this effect: Learn coding!
Copy link to clipboard
Copied
Oh, I will try this out and see what I can accomplish. Rapid reveal looks promising.
Of course, learning code is the best way to get it exactly as you've imagined it... although I haven't quite gotten to that point yet
Thank you very much for your assistance, Günter!