Toggle menu

[jack_grechi 2 Likes (Newbie)]

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

[explorerzip 80 Likes (Contributor)]

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

[PointC 8,599 Likes (Superhero)]

Hi @jack_grechi,

 

Is this what you're trying to do?

 

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

 

Hopefully that helps. Happy tweening.

 

[jack_grechi 2 Likes (Newbie)]

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.
 

[PointC 8,599 Likes (Superhero)]

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.

[jack_grechi 2 Likes (Newbie)]

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!

[jack_grechi 2 Likes (Newbie)]

responsive don't work..

what is my mistake?

 

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

 

[Dipscom 2,815 Likes (Superhero)]

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.

[jack_grechi 2 Likes (Newbie)]

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. 

[Dipscom 2,815 Likes (Superhero)]

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?

[jack_grechi 2 Likes (Newbie)]

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

 

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

 

[Dipscom 2,815 Likes (Superhero)]

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

[jack_grechi 2 Likes (Newbie)]

Thank you it's awesome !

Now i try to underestand your code.