Question posted in
The full documentation can be found here.

Divi theme – Trying to make theme dropdown menu OnClick instead of hover

[Sorry if this is a dup to anyone, I was asked by the admins to move it to overflow]

I’m using the DIVI theme and making some relatively simple modifications to it to better suit my needs. One thing I’m having some difficulty with though surprisingly is swapping out its vertical menu’s hover state drop downs to onclick functionality.

I’ve put together an example of the code below here: JSFIDDLE

$('ul.top-menu').children('.menu-item-has-children').click(function(){
    $(this).children('.sub-menu').slideToggle('slow');
}).children('ul').find('.menu-item').click(function (event) { //select all the `.child` elements and stop the propagation of click events on the elements
    event.stopPropagation();
    return false;
});

Oddly, though I can’t seem to remove the hover state functionality from the menu. An example of DIVI can be found here: DIVI

Note: You’ll need to go to headers in the navigation and choose the dark vertical navigation to replicate my layout.

Thanks in advance for your thoughts!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The theme developer produced a result that produced the required result. The alteration to swap the functionality of the page navigation of DIVI is done in a file titled frontend-builder-scripts.js found in the DIVI folder directory /includes/builder/scripts/frontend-builder-scripts.js

    To alter the hover to click swap the following code found on line 1074(Top line below) from .hover to .click. 

    $et_top_menu.find( 'li' ).hover( function() {
     if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {
     $(this).addClass( 'et-show-dropdown' );
     $(this).removeClass( 'et-hover' ).addClass( 'et-hover' );
            et_menu_hover_triggered = true;
}

    to

    $et_top_menu.find( 'li' ).click( function() {
     if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {
     $(this).addClass( 'et-show-dropdown' );
     $(this).removeClass( 'et-hover' ).addClass( 'et-hover' );
            et_menu_hover_triggered = true;
}

  2. 0

    Generally you should use classes that theme uses to manage showing and hiding menu in order to keep it compatible.

    CODE RESPOSIBLE FOR HOVER MENU (custom.js):

    var $et_top_menu = $( 'ul.nav' );

$et_top_menu.find( 'li' ).hover( function() {
    if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {
        $(this).addClass( 'et-show-dropdown' );
        $(this).removeClass( 'et-hover' ).addClass( 'et-hover' );
    }
}, function() {
    var $this_el = $(this);

    $this_el.removeClass( 'et-show-dropdown' );

    setTimeout( function() {
        if ( ! $this_el.hasClass( 'et-show-dropdown' ) ) {
            $this_el.removeClass( 'et-hover' );
        }
    }, 200 );
} );

    HOW TO UNBIND TRIGGERING HOVER EVENT #1 (if you want to do this somewhere else after it is initialized in custom.js):

     $( 'ul.nav li' ).off("hover");

    HOW TO UNBIND TRIGGERING HOVER EVENT #2 (if you want to modify custom.js right after the code):

    $et_top_menu.find( 'li' ).off("hover");

    HOW TO UNBIND TRIGGERING HOVER EVENT #3 (if you want to modify custom.js :

    Just remove the code and replace it with your on click event code

    HOW TO MAKE ON CLICK EVENT – if you want to leave previous hover code – past below the hover code or use it in your place – note it must be used after custom.js or inside after hover code:

    $( 'ul.nav li' ).off("hover");

$et_top_menu.find( 'li' ).click( function() {
    if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {
        $(this).toggleClass( 'et-show-dropdown' );
        $(this).toggleClass( 'et-hover' );
    }
});

    The code i gave you has no anitmation so do it on your own. Simplest way is to use CSS for example:

    <YOUR SELECTOR> {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

    FIDDLE EXAMPLE – it turns off HOVER event and set up ON CLICK event.

    http://jsfiddle.net/gwn9aqxs/2/

    I added some CSS classes in order to keep it compatible with your theme css classes. I added “nav” classs to parent UL just like it in your theme and i added “mega-menu” class to li parent of ul.sub-menu just like in your theme.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search