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.
Any help would be appreciated.
NAV.hype.zip (88.6 KB)
NAV - HELP.hype.zip (102.6 KB)