Hover Effect for Sub-Menus

[jlo]

Hey there Greensock Guys, I've got a small brainteaser I could use some of your assistance with 

 

So I've got a site with a nav that is using good old CSS transitions to achive a hover effect. I've stripped it back and created a simple copy you can check here:

 

http://webslinger.com.au/GS_hover_test/test_1/index.html

 

So in an effort to make the animation accesible across the board (*ahemcough* for older IE browsers) I just tweaked the nav a little and used the GSAP to achieve the same thing:

 

http://webslinger.com.au/GS_hover_test/test_2/index.html

 

However when you move the mouse cursor from the menu header or its empty space on to an sub-menu title it's tripping the mouseout function, and there's a slight hiccup in height every time you move to a new list item.

Now I know you typically run into this problem with hovers (as opposed to clicking) and I've managed to get around it for the most part, and I've tried a couple of different approaches - like putting a delay on the mouseout, so when you rollover a sub-menu title the hiccup essentially never happens - but haven't been successful.

 

Tried to do a bit of digging and homework first, plenty on Flash/AS forums about this, but nothing I could find for JS, appreciate any input you boys can give.

 

Cheers

[Rodrigo]

Hi,

 

Well in this cases the greater challenge is in the menu CSS, the GSAP part is incredibly easy.

 

The thing is that, like you I always worked with <div> elements instead of <ul>, time and experience has led me to learn why does everyone works with <ul>, if it ain't broken don't fix it. Also  I always work with from instances, like that if you change anything in the menu the new height will be respected and you don't have to change the code every time as well.

TweenLite.from(menuElement, time, {height:0});

Like that the element's height is animated from 0 to it's normal value.

 

Any way I set up a simple codepen based on a menu I did recently for a single page site, feel free to fork and play with it, is an horizontal menu but I think that it shouldn't be much of a difference:

 

See the Pen Apvag by rhernando (@rhernando) on CodePen

 

Best,

Rodrigo.

[jlo]

Thanks for the great response Rodrigo, and sorry for the delayed reply, had to jump on to some other work.

 

I totally get what you're saying, and yeah, in normal circumstances I'd be playing around with the css more. Unfortunately I didn't build it, and am not really in a spot to change it too much, am in a position where I don't want to step on another developer's toes (don't laugh). And yes, I do usually prefer animating from instances too, but I find it can get a little confusing when animating certain properties, like opacity i.e. trying to remember which one you set it to in your css file. Same as when you're using CSS animations and keyframes, and you typically set the fill mode to forwards.

 

Now, I did manage to find a workaround. It doesn't actually solve the problem mind you, so yes, I'm cheating, but I found that when I added some easing - and certain types of easing in particular - it would override or 'delay' the mouseout, so there's no judder or stuttering effect each time you mouse over one of the sub-menu titles. I updated the second test above to show you what I mean, have a look here if you like:

 

http://webslinger.com.au/GS_hover_test/test_2/index.html

 

I know, it's not a proper solution, but it works 

 

Thank you for creating the example pen, very sporting of you. The JS seems pretty detailed for just a simple menu hover, but I really like what you've done with it, very robust.

 

Thanks again