I’ve created a navigation bar with two drop-down menus. There was an issue with the height of the navigation bar overlapping content underneath, making it inaccessible. I therefore made the height of the div 70px, and then the mouseover runs a JS that makes the height 600px and back to 70px on mouse-out.

This works fine on computers, but on tablets there is no delay between the two menus - when you switch from one menu to another, the closing menu ends up making he height 70px when it should remain 600px.

Here is a video to show you what happens.

A possible solution I tried and failed with was a counter:
Counter starts at 0, mouse-over -> counter++.
Mouse out -> counter–

the JS to decrease size only runs if count == 0.

So therefore until both menu’s have closed, the counter will not be 0.

For some reason this doesn’t work though. I’ve included an original document from the video, and the one testing my potential solution.

1, I put the mouse actions only on the groups and took any on the text elements inside off.
2, Removed all the calls to JS of the timelines.
3, put the calls to the JS on the mouse actions. This gave a bit better control as the delay on the timelines firing the JS is removed and made it easier to follow.

@MarkHunte The problem is with the nav-bar closing. It takes 2 seconds to close the navbar, and since you open the new nav bar (height=600) and then the 2 seconds for closing the first navbar is over(height=60), the overall height becomes 60 even though the new navbar is open.

In your solution there is no navbar closing animation. Do you think there’s a way to implement the navbar closing animation into your method?

My idea was to have a sort of counter to see if the navbar is open, the height changing then checks the counter to see if it should reset height to 60.