cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - You can Bookmark boards, posts or articles that you'd like to access again easily! X

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

BhavyaPC
12-Amethyst

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

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 14

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?) .

BhavyaPC
12-Amethyst
(To:zyuan1)

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 .

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.

 

BhavyaPC
12-Amethyst
(To:zyuan1)

I have divided mashup layout into required number of layouts, in every layout I have taken a footer which will hold the sub menu of respective. Also provided on click expansion of the footer but this is not meeting the expectations.zeniumFooterExpansion.PNG

expected that expansion should happen downwards, other icons turn gray, mouse hover highlight is not happening for other icons.

Yes you did, and just bind the Expanded property of the Footer to the Widgets above on the Disabled property, then if you can see the Footer, the widgets will be grey, and won't change color when you hover over.

BhavyaPC
12-Amethyst
(To:zyuan1)

Thank you @zyuan1 ,

 

I have made the changes you said, still we couldn't met expectations.

When it's expanded, all other widgets are grey and disabled, when it's folded, other widgets went normal.  

Didn't you realize this function or you have extra request?

BhavyaPC
12-Amethyst
(To:zyuan1)

No, I haven't tried that. Since the requirement is to expand the area we had given footer expansion they are not satisfied. Looking for different method to achieve this .

slangley
23-Emerald II
(To:BhavyaPC)

Hi @BhavyaPC.

 

If you have found a solution, please feel free to post it here and mark it as the Accepted Solution for the benefit of others on the community.

 

Regards.

 

--Sharon

BhavyaPC
12-Amethyst
(To:slangley)

Hi Sharon,

 

I didn't find a solution, surely I'll post if I get it.

 

Regards

Bhavya

Use a Left/Right side bar and expand when selected should be more friendly in both design and user experience.

 

Or you can try to persuade client to use Popup window

BhavyaPC
12-Amethyst
(To:zyuan1)

Thanks @zyuan1 ,

 

I have tried this method earlier, Since we have very less space we can't place icons in the expanded panel, they look very tiny and not good UI/UX

How many expandable icons are you expecting?  Sidebars/Footer can cover more than 50% of the screen if you allow so the space is not a problem, you can also you contained mashup in Sidebars/ Navigator to open new mashups in response to the selected Icon.

BhavyaPC
12-Amethyst
(To:zyuan1)

There are around 8 icons, which has minimum of 3 sub icons(clickable/Navigator), Since UI has other components we can't provide 50% of space in any manner. 

Number of icons will deffer based on the result of a service.

Top Tags