Skip to main content
B
BhavyaPC1-Visitor
1-Visitor
January 17, 2019
Question

How to perform Mouseover expand and collapse of an area in the same layout without moving to another

  • January 17, 2019
  • 14 replies
  • 4985 views

Hi,

 

I'm trying to implement a page where I have around 8 icons and when Mouse over or button click happen to the icon an expanded area of sub menu icons has to come up by making remaining area and icons gray.

 

Anyone please let me know how can I achieve this.

 

Thanks in advance

14 replies

Z
zyuan15-Regular Member
5-Regular Member
January 21, 2019

Hi,

 

Can you attach a screenshot of your mashup? I don't know you're referring to a Expanded Menu-submenu or a layout (expand with siderbar?) .

B
BhavyaPC1-VisitorAuthor
1-Visitor
January 21, 2019

Thank you zyuan1,

 

The requirement is to build a responsive mashup with background image, icons as in the below image. On mouse hover or click on the icon, all other icons has to go gray and the area below the icon has to get expanded  with sub activities of the respective.

 

In the second image attached, only Projects highlighted with a small expanded area between two rows and activities related to that. 

Image 1Image 1

Image2Image2

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Please let me know is there any possibilities to achieve this .

Z
zyuan15-Regular Member
5-Regular Member
January 21, 2019

Hi,

 

For the expanding designs I know, you can use expandable sidebar/header/footer, Popup and Folding panel.

Folding panel does not fit for your UI; Popup can disable other widgets (turn grey); and with siderbars you can choose to interact with other widgets or not.

 

  • If you only have that Projects widget that has submenu, you can use layout 1(with footer) in another layout 2 (vertical). The projects widget is placed in the bottom of the layout 1, and footer will expand upon click on the widget. [use the Expanded Boolean property of the footer to enable/disable other widget buttons]
  • If you have more than one widget that has submenu, a regular sidebar/footer is suggested for the design.

 

Terms & ConditionsAccessibility statement