Запустить свой обработчик событий для Max Mega Menu
Столкнулся с такой задачей. Для пункта в 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);
}