Highlighted

Change shape size on mouseover

Community Beginner ,
Jul 07, 2017

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 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“.

Views

1.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Change shape size on mouseover

Community Beginner ,
Jul 07, 2017

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 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“.

Views

1.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 07, 2017 0
Adobe Community Professional ,
Jul 07, 2017

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 07, 2017 3
Most Valuable Participant ,
Jul 08, 2017

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 08, 2017 1
LEGEND ,
Jul 08, 2017

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“.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 08, 2017 2
Adobe Community Professional ,
Jul 08, 2017

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 08, 2017 1
LEGEND ,
Jul 08, 2017

Copy link to clipboard

Copied

fotoroeder I think too, this widget would be quite suitable for self closing accordion menus!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 08, 2017 0
Community Beginner ,
Jul 17, 2017

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 17, 2017 0
LEGEND ,
Jul 18, 2017

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 …

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2017 0
Community Beginner ,
Jul 19, 2017

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

Screenshot_1.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 19, 2017 0
LEGEND ,
Jul 19, 2017

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 …

Screen.jpg

One more option is using a states button, containing some accordions:

Screen2.jpg

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 19, 2017 1
Community Beginner ,
Jul 19, 2017

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 19, 2017 0