Jump to content
Search Community

Toggle menu open/close with hover and click

kbeats test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi everyone! 

 

I'm trying to create a menu item that will slide on screen when the user hovers over it (part of it is showing on screen and part is hidden) then will hide again once the user moves their mouse off of it. But I'd also like this to work on mobile, so I'd like it to open and close with clicks as well. The idea is if the menu is currently hidden or closed, when the user clicks the menu will slide open on screen, then if the menu is currently open and the user clicks on it, it will slide back into it's closed position. 

 

I'm creating this in Adobe Animate to be exported as an .oam file and put into an Adobe Captivate project. Here's a screenshot of my Animate stage to give a better visual idea of what I'm looking to do - 

 

slidingMenu.PNG.50e708d7a1f76531b71d8bad269a34f1.PNG

 

So the entire object is what's called a movieclip in animate and I gave it the variable name of 'unitsHome' I have my GSAP library TweenMax loaded into my Animate project.  I created a timeline for sliding the menu onto the screen: 

 

var tl_hover = new TimelineMax();

tl_hover.to(unitsHome, .7, {y:320, ease:Circ.easeInOut});

 

tl_hover.stop(); // so it doesn't play until interacted with 

 

Then for hovering over it to open/hide it I created two functions: 

 

function Hover(){
    tl_hover.play();
}

function Out(){
    tl_hover.reverse();
}

 

And then assigned them as window event listeners: 

 

unitsHome.addEventListener("mouseover", Hover.bind(this));
unitsHome.addEventListener("mouseout", Out.bind(this));

 

This part was working great for just using mouseover and mouseout. But then I'm not sure how to also incorporate the clicking functions. I tried to use .totalProgress() to detect if the timeline had played or not and let that determine whether the menu would open or close on the user's click. The function I wrote: 

 

function Down(){
    if(tl_hover.totalProgress(0)) {
        tl_hover.play();
    } else if (tl_hover.totalProgress(1)) {
        tl_hover.reverse();
    }
}

 

unitsHome.addEventListener("mousedown", Down.bind(this));

 

For testing purposes at this point I commented out  the mouseover and mouseout event listeners and what happens is the menu will open fine, but then when I click on it again once it's open it goes back to it's starting point and plays the timeline over again, opening the menu again. 

 

I tried to recreate something like this in codepen for testing, and almost the same thing is happening there, but instead of playing the timeline again it just sends my object back to it's beginning position. 

 

See the Pen BVYWgd by kbeats (@kbeats) on CodePen

 

I'm used to just creating stuff in Animate, so HTML and CSS are VERY new to me - apologies if my codepen is kind of janky. 

 

Thanks for any help/advice! It is appreciated! 

 

 

 

 

See the Pen BVYWgd by kbeats (@kbeats) on CodePen

Link to comment
Share on other sites

If it were me, I'd probably not worry about any hover effects and just use a click to open and close the menu on all devices. The reason I say that is detecting touch is not 100% accurate and many touch screens have a mouse too. It's all a bit tricky and seems like more of a headache than it may be worth. I also don't think hover always means intent whereas a click or tap does. Of course, this is just my 2 cents worth. YMMV.

 

In most cases it's best to use a timeline and simply play/reverse on click. Here's a demo that was an answer to another forum question, but shows a menu open and close on click. 

See the Pen XKbEBQ by PointC (@PointC) on CodePen

 

Others may jump in with their opinions too. Happy tweening.

:)

 

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...