WordPress.org

Support

Support » Themes and Templates » [Resolved] Drop down Menu

[Resolved] Drop down Menu

  • living4lifeministries
    Member

    @living4lifeministries

    I am brand new to the whole wordpress thing. I’m trying to create a drop down menu using the menus option in the arcade theme. I have it pretty much set up, but on my actual website it won’t let me click on the drop down part. How do I fix this?

Viewing 7 replies - 1 through 7 (of 7 total)
  • living4lifeministries
    Member

    @living4lifeministries

    James Revillini
    Participant

    @jrevillini

    Same issue here. Demo site: http://nhs.vandertech.com/

    James Revillini
    Participant

    @jrevillini

    Fixed it by adding some global javascript to the site. i did this by installing the plugin Global Javascript and then adding this:

    jQuery( function ( $ ) {
        // ---- FIX DROPDOWN NAV
        var fadeouttimer = 250;
        var ddinduration = 200;
        var ddfadeoutduration = 100;
        $( 'a.dropdown-toggle' ).hover( function () {
            $(this).next( 'ul.dropdown-menu' ).slideDown( ddinduration );
        }, function () {
            var $dd = $(this).next( 'ul.dropdown-menu' );
            $dd.data( 'fadeout', setTimeout( function () { $dd.fadeOut( ddfadeoutduration ); }, fadeouttimer ) );
        } );
    
        $( 'ul.dropdown-menu' ).hover( function () {
            clearTimeout( $(this).data( 'fadeout' ) );
        }, function () {
            var $dd = $(this);
            $dd.data( 'fadeout', setTimeout( function () { $dd.fadeOut( ddfadeoutduration ); }, fadeouttimer ) );
        });
    
    } );

    You also need to check off jQuery as a dependency on the side when adding the script to Global Javascript.

    Note: there are arguably better ways to add custom JS to a site, but this is a fast and easy way to get this working. I think the author of the theme simply does not include this functionality in the “basic” version of the theme.

    James Revillini
    Participant

    @jrevillini

    One more thing … I see now that they’re using bootstrap HTML5 attributes to make this work, and that the bootstrap JS is loading, so I’m confused as to why this doesn’t work out of the box. It definitely does something, since it’s adding the dropdown icon and not letting the click of the main menu item go anywhere. It’s strange.

    James Revillini
    Participant

    @jrevillini

    OK, figured this out for real this time. The way to get this working the way it should be is to load the following JS code:

    jQuery( function ( $ ) {
        $('.dropdown-toggle').dropdown();
    } );

    My code posted earlier is still relevant … it’s actually a little fancier because it uses transitions, but this is obviously more succinct and utilizes the data attributes the way they were intended.

    Either use the code in this post or the code in the prior post.

    robinthompson62
    Member

    @robinthompson62

    living4lifeministries….I love your site! This is somewhat the form I want to use for my http://www.treasureourchildren.org If you don’t mind me asking…how did you do the header with the email on the left and the other on the right. Also have a few other questions but do not want to burden you. Thanks for any help!

    living4lifeministries
    Member

    @living4lifeministries

    I am no longer using the arcade theme. Thank you for your support though 🙂

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Resolved] Drop down Menu’ is closed to new replies.