Divi Mega Menu

Category : Divi Theme

https://www.elegantthemes.com/documentation/divi/mega-menus/

 

Divi Mega Menu Collapsable :
 

(function($) {
 




function setup_collapsible_submenus() {

    var $menu = $('#mobile_menu'),

        top_level_link = '#mobile_menu .menu-item-has-children > a';

        

    $menu.find('a').each(function() {         

        if ( ! $(this).siblings('.sub-menu').length ) {

            $(this).on('click', function(event) {

                $(this).parents('.mobile_nav').trigger('click');

            });

        } else {

            $(this).siblings('.mobile-toggle-icon').on('click', function(event) {

                event.preventDefault();

                $(this).parent().toggleClass('visible');

                $(this).find('i').toggleClass('fa-angle-down fa-angle-up')

            });

        }

    });

}


 

$(window).load(function() {

  $('#main-header .et_mobile_menu .menu-item-has-children > a').after('<span class="mobile-toggle-icon"><i class="fa fa-angle-down" aria-hidden="true"></i></span>');

    setTimeout(function() {

        setup_collapsible_submenus();

    }, 700);

});


 

})(jQuery);

 

/* Mega Menu Divi */

#main-header .et_mobile_menu .menu-item-has-children > a {

background-color: transparent; position: relative;

}

#main-header .et_mobile_menu ul.sub-menu {

display: none !important;

visibility: hidden !important; 

transition: all 1.5s ease-in-out;

}

#main-header .et_mobile_menu .visible > ul.sub-menu {

display: block !important;

visibility: visible !important;

}


 

/* Test */

.mobile-toggle-icon  {

    font-size: 16px;

    top: 0;

right: 10px;

padding-right: 10px;

    padding-top: 10px;

    text-align: right;

    speak: none;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    -webkit-font-smoothing: antialiased;

    position: absolute;

    width: 120px;

    height: 40px;

}

#et_mobile_nav_menu ul li {

position: relative;

}

Leave a Reply