Jump to content
Search Community

Menu element not working - please help

chief_wolfinjo 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

Hello :)

 

I have a Wordpress theme where i want to use GSAP JS for my Menu specifically for my submenu

and I've tried a few basic examples and they all work but when i want to use GSAP JS for this element :  #categories.nav li ul , then is not working... How GSAP JS can work with this element : #categories.nav li ul ? This element is for submenu of my Menu.

 

please tell me on basic example below how can i do it ?

 

<script>
window.onload = function(){
    var logo = document.getElementById("logo");
    TweenLite.to(logo, 1, {left:"632px"});
}
</script>
 
Thank you !!!!

 

Link to comment
Share on other sites

Hi and welcome to the forums;

 

The selector "#categories.nav li ul" is unordered list, so unless it have unique ID (TweenLite have own very small selector engine working with IDs ), you have to select it first with pure JS or some selector engine. If you're working with Wordpress theme there is high chance that jQuery is included in the website, so you can use jQuery to select the element you want and then animate it with TweenLite. You can try 

 

<script type="text/javascript">

$(function(){
    TweenLite.to($("#categories.nav li ul"), 1, {left:"632px"});
});

</script>
  • Like 1
Link to comment
Share on other sites

 

Hi and welcome to the forums;

 

The selector "#categories.nav li ul" is unordered list, so unless it have unique ID (TweenLite have own very small selector engine working with IDs ), you have to select it first with pure JS or some selector engine. If you're working with Wordpress theme there is high chance that jQuery is included in the website, so you can use jQuery to select the element you want and then animate it with TweenLite. You can try 

 

<script type="text/javascript">

$(function(){
    TweenLite.to($("#categories.nav li ul"), 1, {left:"632px"});
});

</script>

 

Hi :)

 

thank you for the reply, yes i will try this now. and yes my wp theme is calling jQuery

in separate like this :

wp_enqueue_script( 'jquery' );
Link to comment
Share on other sites

Hi;

 

The effect consists of a lot of CSS and JS that I'm unable to write right now. I'll try to create you working demo of the same effect using TweenMax later today :) 

 

Another thing I would recommend is finding similar menu created with jQuery ( this looks like slideDown / slideUp jQuery effects ) and override the default jQuery animation with TweenMax using jQuery GSAP plugin (

Link to comment
Share on other sites

  • 4 weeks later...

Hello :)

 

I am using this code :

jQuery(document).ready(function() {
jQuery(function () {    
  jQuery('#categories.nav li, #pages.nav li').hover(function () {
    jQuery('ul', this).stop(true, true).delay(200).slideDown(200);
  }, function () {
    jQuery('ul', this).stop(true, true).slideUp(200);
  });
});
});

This code is not working well. For example, when I open the homepage of my wp theme and I mouseover the menu, jquery doesn't work on the first try (so the submenu works normally without the jquery effect). However, it does work from the second attempt onwards.

If I go to another page or I refresh the current page, jQuery doesn't work initially but again, it starts to work on the second attempt...

 

Can you explain why this happens?

 

I would welcome suggestions for a better solution, I just want my submenu to act the same as yootheme or similiar. (I am testing this wordpress theme on localhost)

 

Thank you!! :)

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...