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 :(

 

https://codepen.io/jack_grechi/pen/VNQmdp

Share this post


Link to post
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

Share this post


Link to post
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.
 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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. 

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Thank you it's awesome !

Now i try to underestand your code.

 

 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×