Столкнулся с такой задачей. Для пункта в Max Mega Menu нужно было повесить своё событие через JQuery. Но оно не хотело работать. Причина оказалось в том, что maxmegamenu.js выводится в самом конце страницы. Поэтому чтобы запустить свое событие, его нужно инициализировать после запуска всех скриптов. Я поступил так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// запуск скрипта после загрузки всей страницы 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-его уровня если он есть. Для этого необходимо еще прописать стиль:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/* меню 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); } |
