WordPress.org

Forums

Add jquery effects on default wp menu (4 posts)

  1. ktsixit
    Member
    Posted 3 years ago #

    Hi all,
    The main menu in my website is displayed by "wp_nav_menu" function. It's a dropdown menu controlled by css. I'd like to add some jquery effects everything I've tried so far is not working.

    This is the javascript code I'm using:

    <script type="text/javascript">
    $(document).ready(function() {
    	$("ul#menu-main ul").css({ display: 'none' });
    	$("ul#menu-main li").hover(function() {
    		$(this).find('ul.sub-menu')
    			.stop(true, true).delay(50).animate({ "height": "show", "opacity": "show" }, 200 );
    	}, function(){
    		$(this).find('ul.sub-menu')
    			.stop(true, true).delay(50).animate({ "height": "hide", "opacity": "hide" }, 200 );
    	});
    
    });
    </script>

    The code seems correct to me but it's not working. I'm using jquery v1.6.1 in my pages. Am I missing something?

  2. Oleg Dudkin
    Member
    Posted 3 years ago #

    Try to replace
    $(document).ready(function() {
    with
    jQuery(document).ready(function(4) {

    And also give a link to yout site, please.

  3. ktsixit
    Member
    Posted 3 years ago #

    Thanks a lot for your help Oleg. Your suggestion worked:)

    But could you also explain me why "$" failed, as soon as I'm already loading jquery in my website? Why should I use "jQuery" instead?

    Thank's again!

  4. Oleg Dudkin
    Member
    Posted 3 years ago #

    WordPress developers made jquery not to load as "$".
    There are different frameworks that also can reserve "$" sign for themselves. To avoid any collisions jQuery should be always reffered as "jQuery".
    Usually it's not a problem - you still can use "$" inside such function:
    jQuery(document).ready(function($) {

Topic Closed

This topic has been closed to new replies.

About this Topic