menex.ru
← Все статьи

Запустить свой обработчик событий для Max Mega Menu

07.06.2022 • Теги: #jQuery #wordpress #Хук

Столкнулся с такой задачей. Для пункта в Max Mega Menu нужно было повесить своё событие через JQuery. Но оно не хотело работать. Причина оказалось в том, что maxmegamenu.js выводится в самом конце страницы. Поэтому чтобы запустить свое событие, его нужно инициализировать после запуска всех скриптов. Я поступил так:

// запуск скрипта после загрузки всей страницы
window.onload=function(){
    jQuery(function(){
        // по клику пункта меню убрать переход по ссылке
        jQuery('#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item-has-children>a').click(function(e){
            e.preventDefault();
        });
        // по клику добавлять стиль active для отображения меню 3-его уровня
        jQuery('#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item-has-children').click(function(){
            jQuery(this).toggleClass('active');
            jQuery(this).find('ul.mega-sub-menu').toggleClass('active');
        });

    });
}

Данный код по клику открывает меню 3-его уровня если он есть. Для этого необходимо еще прописать стиль:

/* меню 3-его уровня */
    #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu ul.mega-sub-menu ul.mega-sub-menu {
        max-height: 0;
        opacity: 0;
        line-height:0;
        margin: 0em .8em 0em;
        overflow: hidden;
        transition: all 500ms cubic-bezier(1.000, -0.415, 0.055, 1.355); 
        transition-timing-function: cubic-bezier(1.000, -0.415, 0.055, 1.355);
    }
    #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu ul.mega-sub-menu li ul.mega-sub-menu.active {
        max-height: 999em;
        opacity: 1;
        line-height:inherit;
        margin: .8em;

    }
    #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item-has-children>a:after {
        content: '' ;
        display: inline-block;
        width: 7px;
        height: 7px;
        border-top: 2px solid #666;
        border-right: 2px solid #666;
        transform: rotate(45deg);
        position: absolute;
        margin-left: 5px;
        margin-top: 8px;
        transition: all 500ms cubic-bezier(1.000, -0.415, 0.055, 1.355); 
        transition-timing-function: cubic-bezier(1.000, -0.415, 0.055, 1.355);
    }
    #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item-has-children.active>a:after {
        transform: rotate(135deg);
    }