Документация › Шорткоды и код
JavaScript: события и методы
Скрипт меню — плагин jQuery $.fn.eldermenu. Он сам запускается на всех мегаменю страницы; из своего кода можно подписаться на события и вызвать методы.
События
| Событие | На каком элементе | Когда |
|---|---|---|
eldermenuinit | nav.eldermenu | меню инициализировано |
eldermenuopen | li.eldermenu-item | подменю пункта открылось |
eldermenuclose | li.eldermenu-item | подменю пункта закрылось |
eldermenutoggledopen | nav.eldermenu и кнопка меню | мобильное меню открыто |
eldermenutoggledclose | nav.eldermenu и кнопка меню | мобильное меню закрыто |
eldermenuscrollto, eldermenuscrollto_complete | ссылка пункта | начало и конец плавной прокрутки к якорю |
eldermenu-resize-desktop, eldermenu-resize-mobile | window | ширина окна пересекла контрольную точку |
JavaScript
jQuery(function ($) {
// Счётчик открытий мегаподменю в Яндекс.Метрике
$('.eldermenu').on('eldermenuopen', '.eldermenu-item-level-0', function () {
var title = $(this).find('> .eldermenu-target .eldermenu-target-title').text();
if (window.ym) ym(12345678, 'reachGoal', 'megamenu_open', { section: title });
});
// Блокировать чат-виджет, пока открыто мобильное меню
$('.eldermenu').on('eldermenutoggledopen', function () { $('#chat-widget').hide(); })
.on('eldermenutoggledclose', function () { $('#chat-widget').show(); });
});Методы
Вызываются через $('селектор меню').eldermenu('метод', аргументы…).
| Метод | Что делает |
|---|---|
openSubmenu($li) | открыть подменю пункта |
closeSubmenu($li) | закрыть подменю пункта |
closeAllSubmenus() | закрыть все открытые подменю |
toggleMenuCollapse('open' | 'close' | 'toggle') | открыть, закрыть или переключить мобильное меню |
positionSubmenus() | пересчитать положение подменю (после изменения вёрстки на лету) |
isMobile() | true, если сейчас мобильный режим (ниже контрольной точки) |
JavaScript
var $menu = jQuery('nav.eldermenu-main');
// Открыть раздел «Каталог» по кнопке на странице
jQuery('#show-catalog').on('click', function (e) {
e.preventDefault();
var $li = $menu.find('.eldermenu-item-level-0.menu-catalog'); // класс пункта из поля «CSS-классы»
$menu.eldermenu('openSubmenu', $li);
});
// Закрыть мобильное меню после отправки формы в нём
jQuery(document).on('submit', '.eldermenu form', function () {
if ($menu.eldermenu('isMobile')) $menu.eldermenu('toggleMenuCollapse', 'close');
});Настройки скрипта
Скрипт получает настройки в глобальном объекте eldermenu_data (контрольная точка, задержки, ARIA). Менять их лучше PHP-фильтром eldermenu_json_data.
Где держать свой JavaScript
- В теме (дочерней) — подключите файл с зависимостью
eldermenu, чтобы он загрузился после скрипта меню. - Или в файле
custom/custom.jsплагина с флажком «Загружать пользовательский JavaScript» (помните, что папка плагина перезаписывается при обновлении).
PHP
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_script( 'my-menu', get_stylesheet_directory_uri() . '/js/my-menu.js', array( 'jquery', 'eldermenu' ), '1.0', true );
}, 20 );