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

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

Highlighted
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
Highlighted

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

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

Highlighted

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

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 .

Highlighted

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

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.

 

Highlighted

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

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.

Highlighted

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

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.

Highlighted

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

Thank you @zyuan1 ,

 

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

Highlighted

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

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?

Highlighted

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

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 .

Highlighted

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

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

Highlighted

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

Hi Sharon,

 

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

 

Regards

Bhavya

Highlighted

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

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

Highlighted

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

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

Highlighted

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

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.

Highlighted

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

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.

Announcements

Thingworx Navigate content has a new home! Click here to access the new Thingworx Navigate forum!