Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jack_grechi

Toggle menu

Recommended Posts

Hi,

can some one help me with "best practice" to show and hide menu items?

i'm new to gsap and my tweens don't work :(

 

codepen

See the Pen VNQmdp by jack_grechi (@jack_grechi) on CodePen

Link to comment
Share on other sites

I'm not quite sure what you're trying to accomplish here. Are the items 1, 2, 3, and 4 supposed to be hidden until you click on the "toggle" div? What would be the point of the "toggle" div if you can click directly on each item?

 

See the Pen VNQmdp by jack_grechi (@jack_grechi) on CodePen

 

You actually don't need GSAP at all if you're just looking to make a simple dropdown menu:

 

https://www.w3schools.com/howto/howto_js_dropdown.asp

Link to comment
Share on other sites

1 minute ago, PointC said:

Hi @jack_grechi,

 

Is this what you're trying to do?

 

 

 

 

Hopefully that helps. Happy tweening.

:)

 

exactly, can you explain this to me? 

 

function doCoolStuff() {
    tween.reversed() ? tween.play() : tween.reverse();
}

 

Thank you.
 

Link to comment
Share on other sites

That's just a ternary operator. We say "is the tween reversed?" If true, we play the tween. If false, we reverse the tween.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

 

It's a shorter way of writing this:

function doCoolStuff() {
  if (tween.reversed()) {
    tween.play();
  } else {
    tween.reverse();
  }
}

 

Make sense? Happy tweening.

  • Like 1
Link to comment
Share on other sites

3 minutes ago, PointC said:

That's just a ternary operator. We say "is the tween reversed?" If true, we play the tween. If false, we reverse the tween.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

 

It's a shorter way of writing this:


function doCoolStuff() {
  if (tween.reversed()) {
    tween.play();
  } else {
    tween.reverse();
  }
}

 

Make sense? Happy tweening.

yes, thank you very much!

  • Like 1
Link to comment
Share on other sites

1 hour ago, jack_grechi said:

responsive don't work..

what is my mistake? 

 

Can you be a bit more clear? I have no clue as to what you are expecting when you say that. When I resize the screen, the toggle button appears and disappears as expected.

Link to comment
Share on other sites

6 minutes ago, Dipscom said:

 

Can you be a bit more clear? I have no clue as to what you are expecting when you say that. When I resize the screen, the toggle button appears and disappears as expected.

does not work if you try to open the toggle button and resize. 

Link to comment
Share on other sites

Again, I am at a loss here.

 

I open your codepen, resize the window to be smaller than 768px, the toggle appears, I click it. It animates. I click it again it closes. I resize the window to be bigger than 768px, the toggle disappears. I resize it back to be smaller than 768px, the toggle appears. I click it, the menu opens, I resize the window to be bigger than 768px, the toggle button disappears and the menu stays showing. I resize the window back to be smaller than 768px, the toggle button shows, I click it, it closes the menu.

 

I can't think of anything else I could do with the toggle button and the size of the window. What is it that is not working for you? In more words. What are you expecting to see and what is it doing that you think it should not be doing?

Link to comment
Share on other sites

If you resize the window to be bigger than 768px, the toggle button disappears and the menu items must be ALWAYS displayed.

image.png.4474946d2b2f11a2c64d49efe0be4b13.png

 

if you click the toggle, it does not show the menu correclty:

 

image.thumb.png.f74fd011d44ada010b55824b42cd1030.png

Link to comment
Share on other sites

Right, ok, now I think I am starting to get.

 

What you want is to only run the JS code if the media query condition is satisfied. For that you need to use media queries in JavaScript as well as in your CSS. The example bellow should be what you are trying to accomplish.

 

See the Pen mgxOvM?editors=0011 by dipscom (@dipscom) on CodePen

  • Like 2
Link to comment
Share on other sites

Thank you it's awesome !

Now i try to underestand your code.

 

 

  • Like 1
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.
×