Is there a special way to have an animated (slide down) submenu on hover in the sidebar menu?
Do i have to do that with hiding/showing boxes or do i have to play with the hights of boxes because of animating them?
Thank for your help…
Hey @matthi_seebo
A bit late for the reply but I’ve managed to build an animated dropdown.
The trick is to calculate the height of the submenu to make the container’s height grow to that (custom javascript needed). The first thought would have been to set the height to auto. But transition does not work with this value.
I used workflow (on mouse enter/leave) and 2 variables (a boolean to control when I want the submenu to show, and a variable to hold the height)
I can provide you with a more detailed explaination if you want! 
1 Like
Hi JP,
yes, it would be nice, if you explain/ show a bit more. I think i understood, but maybe not 100%.
Do you work with show/hide or only with height? And, the Icon should turn around after hiding?
Thx
Matthi
Will do !
Only the height so that the animation works.
The rotation can be animated too
Here you go!
Forgot to mention, butI have a condition on the transform property of the icon:
if(isOpened,"rotateZ(0)","rotateZ(-90deg)")
2 Likes
Hi JP,
This was awesome - video was helpful but i think a couple things were missed ( pass through condition workflow, classes) i followed along as best I could.
Possible to get some tips on the below issue?
Hey @shamir
Pretty hard to tell with just a screenshot. But the height of the submenu is either not correct or not well positioned. You’d need to check both and see where the problem is coming from. For that, you can add console.logs to verify the values at each step
Why does the dropdown-menu component have a arrow that allow you to nest components inside ?
How can we make that work ?
You need to use a dropzone
That was helpful.
Thank you Sir. !
1 Like
@jptrinh I’m trying to implement what you suggested in the video, but I’m struggling to fetch the height, so not sure what I’m doing wrong.
This is how I structured the component (for now as test):
So having a dropzone for the main menu item and one for the submenu items (to reuse the menu item component I build).
The submenu dropzone has the submenu class:
Yet I’m still not getting any height with your JS.
I’ve also tried another way, which actually works, but only for one component instance. I’ve given the submenu dropzone a id “submenu”. Then toggled on the “Advanced Interactions” option, which gives you the height of the element as variable:
But again this only works in one instance of the component, probably because the id is shared globally and not with component only.
Any pointers what I’m doing wrong would be much appreciated!
Hey @Rob-EXSYN 
I think that because of the update generated DOM. When I define the submenuheight variable and use the multiple parentElement, it’s no longer targeting the correct element.
But I think that can be simplified by using the context variable thisInstance that targets the main component.
So it would look like this: const submenuHeight = context.thisInstance.querySelector(".submenu").offsetHeight;
Let me know if that works
(I think I could also update that video, since it got lots of clicks 
)
@jptrinh Thanks for the help! Yes for sure, the video was very helpful.
I’ve just tried your suggestion, but it is still not working. What sets the offsetHeight? Because the submenu container is currently on “auto”. Somehow WeWeb is able to deduct the required height with that Component Positions variable. However, offsetHeight always seems to return 0.
Oh I forgot a step.
You’d need to create a component workflow where you put the 2 actions Change variable value. This way, thisInstance will be component wrapper.
And in the initial click event (set on the menu-item), you need to Execute workflow.
The offsetHeight is the height of the whole component, including the submenu-items if they are displayed.
1 Like
@jptrinh I got that part already 
but it’s not working and still returning 0, so hence I’m trying to understand if it’s due to my component build up with the dropzones.
Basically I have:
Component:
Menu Item (container)
> main-menu (dropzone)
> submenu (container)
>>submenu-items (dropzone)
The workflow is on Menu Item level, the class I set on the submenu container and that’s where I try to dermine the height for.
btw. you don’t have to do in in JS, this is the same in WeWeb formula format (maybe for other people good to know that are less familiar with JS)
EDIT
Figured it out!! offsetHeight was not giving a value because I was using “Display” to hide the submenu and not Conditional Rendering. Apparently there is a difference. Once I switched to Conditional Rendering the offsetHeight is given correctly. So that’s a very important nuance apparently.
@jptrinh Hmmm it’s still not working reliably. The offsetHeight only seems to work when I enable the “Force display in Editor” option in the beginning. On published website it is not working.
@Rob-EXSYN, sorry for the delay!
Here an updated video on how I would do that today
And some doc:
Component structure
Trigger(dropzone)Submenu(dropzone)
Variables
open(boolean)height(number)
Workflows
-
init(on Mounted)- Change
heightvalue togetTriggerHeight()
- Change
-
changeHeight(on Execution)- If
openis true thenheight = getTriggerHeight() + getSubmenuHeight() - else
height = getTriggerHeight()
- If
-
toggle(on Execution)- Change variable value: open = !open
- Execute workflow changeHeight()
Formulas
-
getTriggerHeight()
-
getSubmenuHeight()
